src/components/App.tsx

@@ -22,6 +22,8 @@ const App: React.FC = () => {
     .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">
@@ -36,15 +38,15 @@ const App: React.FC = () => {
       <Navigator />
       {ethStatus?.syncState === "syncing" ||
       handshakeStatus?.syncState === "syncing" ? (
-        <div className="py-4 -mb-4 flex flex-row gap-x-3">
+        <div className="py-2 flex flex-row">
           {ethStatus?.syncState === "syncing" ? (
-            <span className="rounded-full bg-neutral-800 text-white p-1 px-4">
-              <span className="font-mono mr-2 font-bold">{ethStatus.sync.toFixed(0)}%</span> Syncing Ethereum Network
+            <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-neutral-800 text-white p-1 px-4">
-              <span className="font-bold font-mono mr-2">{handshakeStatus.sync.toFixed(1)}%</span> Syncing Handshake Network
+            <span className="rounded-full bg-white text-black p-1">
+              {handshakeStatus.sync.toPrecision(1)}% Syncing Handshake Network
             </span>
           ) : null}
         </div>

src/components/Browser.tsx

@@ -180,6 +180,8 @@ export function Navigator() {
     }
   }, [contextUrl]);
 
+  console.log("Navigator mounted");
+
   return (
     <form
       onSubmit={(e) => {
@@ -242,8 +244,8 @@ export function Browser() {
         .replace(/\/$/, "");
       if (url !== realUrl) {
         setUrl(realUrl);
+        setIsLoadingPage(false);
       }
-      setIsLoadingPage(false);
     } catch (e) {
       // This will catch errors related to cross-origin requests, in which case we can't access the iframe's contentWindow.location
       console.warn(
@@ -261,12 +263,12 @@ export function Browser() {
           if (
             mutation.type === "attributes" &&
             mutation.attributeName === "src"
-            ) {
-              setIsLoadingPage(true);
-            }
+          ) {
+            setIsLoadingPage(true);
           }
-        });
-        
+        }
+      });
+
       observer.observe(iframe, { attributes: true });
       return () => observer.disconnect(); // Clean up on unmount
     }
@@ -276,7 +278,7 @@ export function Browser() {
     <>
       {isLoadingPage ? (
         <div className="fixed bottom-2 left-3">
-          <span className="max-w-4xl w-full block my-2 py-1 px-4 rounded-lg bg-gray-900/70 border border-gray-600 text-gray-400">
+          <span className="max-w-4xl w-full block my-2 py-1 px-4 rounded-lg opacity-80 bg-gray-900/70 border border-gray-600 text-gray-400">
             Loading {url}...
           </span>
         </div>