how to show Loading indicator while fetching data uisng getserversideprops

Question

I want to show a loading icon while fetching data from external API using getseversideprops.The loading indicator is working while changing the route but i want to show loading indicator while pre-rendering the page using getServerSideProps.

Answer 1

I use this code

useEffect(() => {
    const handleStart = () => { setPageLoading(true); };
    let handleComplete = () => {
        setTimeout(() => {
            setPageLoading(false);
        }, 500);
    };
    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);
}, [router]);

setPageLoading for show loading

const [pageLoading, setPageLoading] = useState<boolean>(false);