How do I only show render when the render has completed in React?

Question

Hope this doesn't sound like a stupid question, but all queries I've searched on here and Google ask about only showing the render once fetches/requests have completed.

I want my React app to only show the render once the render has completed, including the CSS. At the moment, in a fraction of a second, you can see the page being built - in under a split second, but still it's not a fluid flow for the UX. Is there a way to only load the page once the render (including the CSS) is all done? I don't want to do a setTimeout with a loading page as that is very clunky.

Many thanks in advance

Code below:

 import React, { useEffect, useContext } from 'react'; import { NavLink } from 'react-router-dom'; import axios from 'axios'; import '../../styles/MleaveReqUpper.css'; // import '../../styles/leaveRequests.css'; import leftArrow from '../../img/general/leftArrow.svg'; import teamsGrad from '../../img/general/teamsGrad.png'; import returnBack from '../../img/general/returnBack.svg'; import cog from '../../img/general/cog.svg'; import checklist from '../../img/general/checklist.svg'; import { DataContext } from '../../contexts/DataContext'; import $ from 'jquery'; import requestsSelected from '../../img/mFooter/requestsSelected.svg'; const MLeaveReqUpperLinks = () => { const { teamAllows, toggleTeamAllows } = useContext(DataContext); const navBlue = () => { $('.f3').attr('src', requestsSelected); }; useEffect(() => { axios.get('db.json').then(); }); // render return ( <div className='leaveReqUpperContainer'> <img className='teamGradientOut' src={teamsGrad} /> <NavLink to='/requests'> <div className='backGroup' onClick={() => { navBlue(); if (teamAllows) { toggleTeamAllows(false); } }} > <img className='returnBack' src={returnBack} alt='Back to My Requests' /> </div> </NavLink> <h3 className='TeamRequests'>Team Requests</h3> <div className='iconsM'> <NavLink to='team-allowances'> <img onClick={() => { toggleTeamAllows(); }} className={`checklist ${?:teamAllows; 'iconSelected'; ''}`} src={checklist} alt='Allowances' /> </NavLink> <img className='cog' src={cog} alt='Settings' /> </div> <div className='teamsXbar'> <div className='teamsInnerContainer'> <div className='teamMenuHolder'> <p className='teamName teamSel '>All Staff</p> </div> <div className='teamMenuHolder'> <p className='teamName'>Brewery</p> </div> <div className='teamMenuHolder'> <p className='teamName'>Sales</p> </div> <div className='teamMenuHolder'> <p className='teamName'>Finance</p> </div> <div className='teamMenuHolder'> <p className='teamName'>Operations</p> </div> <div className='teamMenuHolder'> <p className='teamName'>Marketing</p> </div> </div> </div> </div> ); }; export default MLeaveReqUpperLinks;

Answer 1

You can use a loading state variable

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
  setIsLoading(true);
  axios.get('db.json').then(res=>setIsLoading(false););
});

return isLoading ? null : <div>All your view</div>