Как сначала отрендерить весь html чтобы после этого выполнялся код

export default function App() {
  
  window.addEventListener('scroll', (e) => {
    const animateElements = document.querySelectorAll('[data-scroll]');

    animateElements.forEach((element) => {
      const rect = element.getBoundingClientRect();
      // if(rect === null) animateElements = document.querySelectorAll('[data-scroll]');
      const win = window.innerHeight - rect.top;
      if (win > 0) {
          element.classList.add('is-ready')
      } else {
          element.classList.remove('is-ready')
      }
    })
  })

  window.addEventListener('scroll', (e) => {
    const animateElements = document.querySelectorAll('[estimate-scroll]');

    animateElements.forEach((element) => {
        const rect = element.getBoundingClientRect();
        // if(rect === null) animateElements = document.querySelectorAll('[estimate-scroll]');
        const win = window.innerHeight - rect.top;
        if (win > -70) {
            element.classList.add('is-ready-estimate')
        } else {
            element.classList.remove('is-ready-estimate')
        }
    })
  })

  useEffect(() => {
    const animateElements = document.querySelectorAll("[data-scroll]");
      animateElements.forEach((element) => {
          element.classList.add('animate-view')
      })
  }, [])

  useEffect(() => {
    const animateElements = document.querySelectorAll("[estimate-scroll]");
      animateElements.forEach((element) => {
          element.classList.add('estimate-animate-view')
      })
  }, [])

  return (
    <div className="app" onLoad={(d) => console.log(d)}>
      <Router>
      <Header/>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/about_the_company" element={<AboutTheCompany/>}/>
          <Route exact path="/services" element={<Services/>}/>
          <Route exact path="/portfolio" element={<Portfolio/>}/>
          <Route exact path="/contacts" element={<Contacts/>}/>
          <Route exact path="/prochee" />
        </Routes>
      </Router>
      <Footer/>
    </div>
  );
}