diff --git a/frontend/components/Loading.tsx b/frontend/components/Loading.tsx
new file mode 100644
index 000000000..aa3570888
--- /dev/null
+++ b/frontend/components/Loading.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const LoadingWrapper = styled.div`
+ background-color: #0000;
+`;
+
+const Loading = () => ;
+
+export default Loading;
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index 7a6c2efe8..442d6e14c 100644
--- 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 ;
+ }
return (
diff --git a/frontend/pages/_document.tsx b/frontend/pages/_document.tsx
new file mode 100644
index 000000000..2d1d90e53
--- /dev/null
+++ 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 {
+ const sheet = new ServerStyleSheet();
+ const originalRenderPage = ctx.renderPage;
+
+ try {
+ ctx.renderPage = () =>
+ originalRenderPage({
+ enhanceApp: (App) => (props) => sheet.collectStyles(),
+ });
+
+ const initialProps = await Document.getInitialProps(ctx);
+ return {
+ ...initialProps,
+ styles: (
+ <>
+ {initialProps.styles}
+ {sheet.getStyleElement()}
+
+ ),
+ };
+ } finally {
+ sheet.seal();
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default MyDocument;