Check whether React.Suspense is ready

Question

I'm using the Intersection Observer API in React to add some animations. I am adding as Intersection Entries some elements.

The problem is that I have the app in multiple languages, and due to the implementation that the tool I am using to translate has, I need to wrap all my components into React.Suspense to wait for languages to load.

When useEffect queries for the elements, they aren't still in the DOM, and therefore they are not assigned as entries.

This is my custom hook:

hooks/useObserver.js

import { useState } from "react";
import { useEffect, useRef } from "react";

export function useObserver(config = {}) {
  const [elements, setElements] = useState([]);
  const [entries, setEntries] = useState([]);

  const observer = useRef(
    new IntersectionObserver(observedEntries => {
      setEntries(observedEntries);
    }, config)
  );

  useEffect(() => {
    const { current: currentObserver } = observer;

    currentObserver.disconnect();

    if (elements.length > 0) {
      elements.forEach(el => currentObserver.observe(el));
    }
    return () => {
      if (currentObserver) {
        currentObserver.disconnect();
      }
    };
  }, [elements]);

  return { observer: observer.current, setElements, entries };
}

and this is my main component:

App.jsx

import Header from "./components/Header";
import Hero from "./components/Hero";
import Footer from "./components/Footer";
import { Loader } from "./components/shared/Loader";
import { useObserver } from "./hooks/useObserver";
import { useEffect, Suspense } from "react";

function App() {
  const { entries, setElements } = useObserver({});

  useEffect(() => {
      const sections = document.querySelectorAll("section.animated-section");
      setElements(sections);
    };
  }, [setElements]);

  useEffect(() => {
    entries.forEach(entry => {
      entry.target.classList.toggle("section-visible", entry.isIntersecting);
    });
  }, [entries]);

  return (
    <Suspense fallback={<Loader />}>
      <Header />
      <Hero />
      <Footer />
    </Suspense>
  );
}

export default App;

I tried to set a timeout to wait some seconds and then add the elements as entries, and it works correctly:

  useEffect(() => {
    const observeElements = () => {
      const sections = document.querySelectorAll("section.animated-section");

      setElements(sections);
    };

    const observeElementsTimeout = setTimeout(observeElements, 3000);

    return () => clearTimeout(observeElementsTimeout)
  }, [setElements]);

I want to know if:

There is a way to know when React.Suspense is ready
There is a better approach to solve my problem

Thanks in advance!!

Check whether React.Suspense is ready

0 Answers0