From 68dd21ba12ee62dc27d80c93849e86f51a0597ca Mon Sep 17 00:00:00 2001 From: SarthakDev12 Date: Thu, 25 Jul 2024 14:51:17 +0530 Subject: [PATCH] fix unstyled text visible after splash screen --- frontend/components/Loading.tsx | 9 +++++++ frontend/pages/_app.tsx | 27 ++++++++++++++++++- frontend/pages/_document.tsx | 47 +++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 frontend/components/Loading.tsx create mode 100644 frontend/pages/_document.tsx 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;