From eb4273d20c32cad144f75025c0d9cdd0a35c171c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Tue, 31 Aug 2021 10:27:06 -0300
Subject: [PATCH] fix poolList spinner position

---
 app/javascript/src/assets/vectors/spinner.svg | 18 +++++++++++++++++
 .../src/components/Spinner/Spinner.tsx        | 20 +++++++++----------
 app/javascript/src/pages/Home/Container.tsx   |  4 +++-
 app/javascript/src/pages/Home/PoolListing.tsx |  9 ++++++++-
 4 files changed, 38 insertions(+), 13 deletions(-)
 create mode 100644 app/javascript/src/assets/vectors/spinner.svg

diff --git a/app/javascript/src/assets/vectors/spinner.svg b/app/javascript/src/assets/vectors/spinner.svg
new file mode 100644
index 0000000..3b54523
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/javascript/src/components/Spinner/Spinner.tsx b/app/javascript/src/components/Spinner/Spinner.tsx
index a2b589e..e7eca27 100644
--- a/app/javascript/src/components/Spinner/Spinner.tsx
+++ b/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 ">
-      <div
-        style={{ borderTopColor: "transparent" }}
-        className={cs(
-          "border-solid animate-spin  rounded-full border-gray-300 border-8",
-          sizeClasses ?? "h-20 w-20"
-        )}
-      />
-    </div>
+    <img
+      className={cs("", width ? `h-${width} w-${width}` : "h-20 w-20")}
+      alt="loading spinner"
+      src={spinner}
+    />
   );
 };
diff --git a/app/javascript/src/pages/Home/Container.tsx b/app/javascript/src/pages/Home/Container.tsx
index dca682e..0289891 100644
--- a/app/javascript/src/pages/Home/Container.tsx
+++ b/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>
   );
 };
diff --git a/app/javascript/src/pages/Home/PoolListing.tsx b/app/javascript/src/pages/Home/PoolListing.tsx
index 200b390..7aa4240 100644
--- a/app/javascript/src/pages/Home/PoolListing.tsx
+++ b/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) => (