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}