From d7449b6e75ff9fe6b109db78692bb55e49347466 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Thu, 2 Nov 2023 19:34:16 +0100
Subject: [PATCH] fix: improve loading

---
 src/components/App.tsx     | 12 +++++-------
 src/components/Browser.tsx | 16 +++++++---------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 0f37aba..2786b2e 100644
--- a/src/components/App.tsx
+++ b/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>
diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx
index f3ba7aa..629e54d 100644
--- a/src/components/Browser.tsx
+++ b/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>