add spinner at initial load

t0lia · Jul 21, 2024 · d4c13ae · d4c13ae
1 parent 6e44658
commit d4c13ae
Showing 1 changed file with 24 additions and 14 deletions.
diff --git a/frontend/src/app/helpers/web3-provider.tsx b/frontend/src/app/helpers/web3-provider.tsx
@@ -1,36 +1,46 @@
 "use client";
 
-import {WagmiProvider} from "wagmi";
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import {ConnectKitProvider, SIWEProvider} from "connectkit";
-import {siweConfig} from "./siwe-config";
-import {useConfigStore} from "@/app/store/configStore";
-import {useEffect, useState} from "react";
-import {constructWagmiConfig} from "./wagmi-contract-builder";
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConnectKitProvider, SIWEProvider } from "connectkit";
+import { siweConfig } from "./siwe-config";
+import { useConfigStore } from "@/app/store/configStore";
+import { useEffect, useState } from "react";
+import { constructWagmiConfig } from "./wagmi-contract-builder";
+import { Loader2 } from "lucide-react";
 
 const queryClient = new QueryClient();
 
-export const Web3Provider = ({children, walletConnectProjectId}: {
-  children: React.ReactNode; walletConnectProjectId: string;
+export const Web3Provider = ({
+  children,
+  walletConnectProjectId,
+}: {
+  children: React.ReactNode;
+  walletConnectProjectId: string;
 }) => {
   const [wagmiConfig, setStateWagmiConfig] = useState(null);
 
-  const {fetchContractConfig, setWagmiConfig} = useConfigStore();
+  const { fetchContractConfig, setWagmiConfig } = useConfigStore();
 
   useEffect(() => {
     fetchContractConfig()
-      .then(contractConfig => {
-        let wagmiCfg = constructWagmiConfig(walletConnectProjectId, contractConfig);
+      .then((contractConfig) => {
+        let wagmiCfg = constructWagmiConfig(
+          walletConnectProjectId,
+          contractConfig
+        );
         setStateWagmiConfig(wagmiCfg);
         setWagmiConfig(wagmiCfg);
       })
-      .catch(error => console.error('Failed to load configuration', error));
+      .catch((error) => console.error("Failed to load configuration", error));
   }, [walletConnectProjectId]);
 
   return (
     <div>
       {!wagmiConfig ? (
-        <div>Loading...</div>
+        <div className="flex justify-center items-center h-screen">
+          <Loader2 className="animate-spin" />
+        </div>
       ) : (
         <WagmiProvider config={wagmiConfig}>
           <QueryClientProvider client={queryClient}>