add loading spinner on PoolListing

app/javascript/src/components/Navbar/Navbar.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { MenuIcon } from "@heroicons/react/outline";
 
 import XStakeLogo from "../../assets/images/logo.png";
 import { useApp } from "../../contexts/AppProvider";
@@ -23,23 +24,10 @@ export const Navbar = () => {
   return (
     <nav className="w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
       <button
-        className="w-12 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none"
+        className="w-12 mr-2 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none"
         onClick={() => handleExpandSideNav()}
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-full w-full"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 6h16M4 12h16M4 18h16"
-          />
-        </svg>
+        <MenuIcon />
       </button>
       <img
         src={XStakeLogo}

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

@@ -0,0 +1,21 @@
+import type { FC } from "react";
+import React from "react";
+import cs from "classnames";
+
+type Props = {
+  sizeClasses?: string;
+};
+
+export const Spinner: FC<Props> = ({ sizeClasses }) => {
+  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>
+  );
+};

app/javascript/src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export * from "./Spinner";

app/javascript/src/components/index.ts

@@ -3,3 +3,4 @@ export * from "./SideNav";
 export * from "./Modal";
 export * from "./Input";
 export * from "./Button";
+export * from "./Spinner";