fix poolList spinner position

app/javascript/src/assets/vectors/spinner.svg

@@ -0,0 +1,18 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#6b7280">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(1 1)" stroke-width="2">
+      <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
+      <path d="M36 18c0-9.94-8.06-18-18-18">
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from="0 18 18"
+          to="360 18 18"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </g>
+  </g>
+</svg>

app/javascript/src/components/Spinner/Spinner.tsx

@@ -2,20 +2,18 @@ import type { FC } from "react";
 import React from "react";
 import cs from "classnames";
 
+import spinner from "../../assets/vectors/spinner.svg";
+
 type Props = {
-  sizeClasses?: string;
+  width?: string;
 };
 
-export const Spinner: FC<Props> = ({ sizeClasses }) => {
+export const Spinner: FC<Props> = ({ width }) => {
   return (
-    <div className="absolute right-1/2 bottom-1/2  transform translate-x-1/2 translate-y-1/2 ">
+    <img
-      <div
+      className={cs("", width ? `h-${width} w-${width}` : "h-20 w-20")}
-        style={{ borderTopColor: "transparent" }}
+      alt="loading spinner"
-        className={cs(
+      src={spinner}
-          "border-solid animate-spin  rounded-full border-gray-300 border-8",
-          sizeClasses ?? "h-20 w-20"
-        )}
     />
-    </div>
   );
 };

app/javascript/src/pages/Home/Container.tsx

@@ -11,7 +11,9 @@ export const Container = ({
 }: React.PropsWithChildren<ContainerProps>) => {
   return (
     <div className="w-full flex items-center justify-center px-8 py-2 2xl:p-0">
-      <div className={cx("max-w-5xl w-full flex", className)}>{children}</div>
+      <div className={cx("max-w-5xl w-full flex flex-col", className)}>
+        {children}
+      </div>
     </div>
   );
 };

app/javascript/src/pages/Home/PoolListing.tsx

@@ -69,9 +69,16 @@ export const PoolListing = () => {
     })();
   }, [provider]);
 
+  if (isLoadingPools) {
+    return (
+      <div className="w-full grid place-items-center mt-12">
+        <Spinner />
+      </div>
+    );
+  }
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full gap-8 py-4 -mt-16 overflow-x-hidden">
-      {isLoadingPools && <Spinner />}
       {validPools
         .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
         .map((pool) => (