LumeWeb
/
web3browser.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve loading

This commit is contained in:
Juan Di Toro 2023-11-02 19:34:16 +01:00
parent 8cd4324508
commit d7449b6e75
2 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/App.tsx
View File

@ -22,8 +22,6 @@ const App: React.FC = () => {
.filter((n) => n.name.toLowerCase() === "handshake") .filter((n) => n.name.toLowerCase() === "handshake")
.at(0); .at(0);
console.log({ ethStatus, handshakeStatus, networks });
return ( 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"> <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="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 /> <Navigator />
{ethStatus?.syncState === "syncing" || {ethStatus?.syncState === "syncing" ||
handshakeStatus?.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" ? ( {ethStatus?.syncState === "syncing" ? (
<span className="rounded-full bg-white text-black p-1"> <span className="rounded-full bg-neutral-800 text-white p-1 px-4">
{ethStatus.sync.toPrecision(1)}% Syncing Ethereum Network <span className="font-mono mr-2 font-bold">{ethStatus.sync.toFixed(0)}%</span> Syncing Ethereum Network
</span> </span>
) : null} ) : null}
{handshakeStatus?.syncState === "syncing" ? ( {handshakeStatus?.syncState === "syncing" ? (
<span className="rounded-full bg-white text-black p-1"> <span className="rounded-full bg-neutral-800 text-white p-1 px-4">
{handshakeStatus.sync.toPrecision(1)}% Syncing Handshake Network <span className="font-bold font-mono mr-2">{handshakeStatus.sync.toFixed(1)}%</span> Syncing Handshake Network
</span> </span>
) : null} ) : null}
</div> </div>

14
src/components/Browser.tsx
View File

@ -180,8 +180,6 @@ export function Navigator() {
} }
}, [contextUrl]); }, [contextUrl]);
console.log("Navigator mounted");
return ( return (
<form <form
onSubmit={(e) => { onSubmit={(e) => {
@ -244,8 +242,8 @@ export function Browser() {
.replace(/\/$/, ""); .replace(/\/$/, "");
if (url !== realUrl) { if (url !== realUrl) {
setUrl(realUrl); setUrl(realUrl);
setIsLoadingPage(false);
} }
setIsLoadingPage(false);
} catch (e) { } catch (e) {
// This will catch errors related to cross-origin requests, in which case we can't access the iframe's contentWindow.location // This will catch errors related to cross-origin requests, in which case we can't access the iframe's contentWindow.location
console.warn( console.warn(
@ -263,11 +261,11 @@ export function Browser() {
if ( if (
mutation.type === "attributes" && mutation.type === "attributes" &&
mutation.attributeName === "src" mutation.attributeName === "src"
) { ) {
setIsLoadingPage(true); setIsLoadingPage(true);
}
} }
} });
});
observer.observe(iframe, { attributes: true }); observer.observe(iframe, { attributes: true });
return () => observer.disconnect(); // Clean up on unmount return () => observer.disconnect(); // Clean up on unmount
@ -278,7 +276,7 @@ export function Browser() {
<> <>
{isLoadingPage ? ( {isLoadingPage ? (
<div className="fixed bottom-2 left-3"> <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}... Loading {url}...
</span> </span>
</div> </div>