fix: add more loading state

src/components/App.tsx

@@ -2,6 +2,7 @@ import {
   AuthProvider,
   LumeStatusProvider,
   NetworksProvider,
+  useNetworks,
 } from "@lumeweb/sdk";
 
 import {
@@ -13,30 +14,60 @@ import Lume from "@/components/Lume.tsx";
 import LogoImg from "@/assets/lume-logo.png";
 
 const App: React.FC = () => {
+  const { networks } = useNetworks();
+  const ethStatus = networks
+    .filter((n) => n.name.toLowerCase() === "ethereum")
+    .at(0);
+  const handshakeStatus = networks
+    .filter((n) => n.name.toLowerCase() === "handshake")
+    .at(0);
+
+  console.log({ ethStatus, handshakeStatus, networks });
+
+  return (
+    <header className="relative border rounded-md m-4 border-neutral-800 px-3 py-4 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
+      <div className="relative px-2 my-2 mb-4 pl-2 pb-2 w-full flex justify-between">
+        <div className="flex items-center gap-x-2 text-zinc-500">
+          <img src={LogoImg.src} className="w-20 h-7" />
+          <h2 className="border-l border-current pl-2">Web3 Browser</h2>
+        </div>
+        <div className="w-32 flex justify-end h-10">
+          <Lume />
+        </div>
+      </div>
+      <Navigator />
+      {ethStatus?.syncState === "syncing" ||
+      handshakeStatus?.syncState === "syncing" ? (
+        <div className="py-2 flex flex-row">
+          {ethStatus?.syncState === "syncing" ? (
+            <span className="rounded-full bg-white text-black p-1">
+              {ethStatus.sync.toPrecision(1)}% Syncing Ethereum Network
+            </span>
+          ) : null}
+          {handshakeStatus?.syncState === "syncing" ? (
+            <span className="rounded-full bg-white text-black p-1">
+              {handshakeStatus.sync.toPrecision(1)}% Syncing Handshake Network
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+    </header>
+  );
+};
+
+const Root = () => {
   return (
     <BrowserStateProvider>
       <LumeStatusProvider>
-        <AuthProvider>
-          <header className="relative border rounded-md m-2 border-neutral-800 px-3 py-4 w-[calc(100%-16px)] bg-neutral-900 flex flex-col">
-            <div className="relative px-2 pl-2 py-2 w-full flex justify-between">
-              <div className="flex gap-x-2 my-2 mb-4 text-zinc-500">
-                <img src={LogoImg.src} className="w-20 h-7" />
-                <h2 className="border-l border-current pl-2">Web3 Browser</h2>
-              </div>
-              <div className="w-32 flex justify-end max-h-10">
-                <NetworksProvider>
-                  <Lume />
-                </NetworksProvider>
-              </div>
-            </div>
-            <Navigator />
-          </header>
-
-          <Browser />
-        </AuthProvider>
+        <NetworksProvider>
+          <AuthProvider>
+            <App />
+            <Browser />
+          </AuthProvider>
+        </NetworksProvider>
       </LumeStatusProvider>
     </BrowserStateProvider>
   );
 };
 
-export default App;
+export default Root;

src/components/Browser.tsx

@@ -199,7 +199,7 @@ export function Navigator() {
       <NavInput
         ref={(el) => (inputEl.current = el)}
         disabled={!ready}
-        className="rounded-l-full border-none focus-visible:ring-offset-0"
+        className={`rounded-l-full bg-neutral-800 text-white border-none focus-visible:ring-offset-0 ${!ready ? "bg-neutral-950" : ""}`}
         name="url"
       />
       <Button