fix: improve loading

src/components/App.tsx

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

src/components/Browser.tsx

@@ -180,8 +180,6 @@ export function Navigator() {
     }
   }, [contextUrl]);
 
-  console.log("Navigator mounted");
-
   return (
     <form
       onSubmit={(e) => {
@@ -244,8 +242,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(
@@ -263,12 +261,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
     }
@@ -278,7 +276,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 opacity-80 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 bg-gray-900/70 border border-gray-600 text-gray-400">
             Loading {url}...
           </span>
         </div>