fix unstyled text visible after splash screen

valory-xyz · Jul 25, 2024 · 68dd21b · 68dd21b
1 parent 9be7b1f
commit 68dd21b
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 1 deletion.
diff --git a/frontend/components/Loading.tsx b/frontend/components/Loading.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const LoadingWrapper = styled.div`
+  background-color: #0000;
+`;
+
+const Loading = () => <LoadingWrapper />;
+
+export default Loading;
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -2,7 +2,7 @@ import '../styles/globals.scss';
 
 import { ConfigProvider } from 'antd';
 import type { AppProps } from 'next/app';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Layout } from '@/components/Layout';
 import { BalanceProvider } from '@/context/BalanceProvider';
@@ -18,17 +18,42 @@ import { StakingContractInfoProvider } from '@/context/StakingContractInfoProvid
 import { StoreProvider } from '@/context/StoreProvider';
 import { WalletProvider } from '@/context/WalletProvider';
 import { mainTheme } from '@/theme';
+import Loading from '@/components/Loading';
 
 export default function App({ Component, pageProps }: AppProps) {
   const isMounted = useRef(false);
+   const [isLoaded, setIsLoaded] = useState(false);
+  const [loadingTimeReached, setLoadingTimeReached] = useState(false);
 
   useEffect(() => {
     isMounted.current = true;
+
+    const handleLoad = () => {
+      setIsLoaded(true);
+    };
+ const checkStylesLoaded = () => {
+      const styles = document.querySelectorAll('link[rel="stylesheet"]');
+      if (styles.length > 0) {
+        handleLoad();
+      }
+    };
+
+      const timer = setTimeout(() => {
+      setLoadingTimeReached(true);
+    }, 1000);
+
+    checkStylesLoaded();
+    window.addEventListener('load', checkStylesLoaded);
     return () => {
       isMounted.current = false;
+      clearTimeout(timer);
+      window.removeEventListener('load', checkStylesLoaded);
     };
   }, []);
 
+ if (!loadingTimeReached || !isLoaded) {
+    return <Loading />;
+  }
   return (
     <ElectronApiProvider>
       <StoreProvider>

diff --git a/frontend/pages/_document.tsx b/frontend/pages/_document.tsx
@@ -0,0 +1,47 @@
+// _document.tsx
+import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preload" href="/_next/static/css/antd.css" as="style" />
+          <link rel="stylesheet" href="/_next/static/css/antd.css" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;