Как сделать прелоадер для ReactJs?

Question

[StepsOnes]

Есть написанный прелоад для сайта, нашел один способ реализовать его

function App() {
    const [loading, setLoading] = useState(true);
    let preload = document.getElementById('preload');
    if (preload) {
        setTimeout(() => {
            preload.style.display = "none";
            setLoading(false);
        }, 4000)
    }

  return (
    !loading && (
        <Home />
    )
  );
}

Но.. Он же по сути срабатывает просто по таймеру, а как сделать так, что бы прелоад исчезал когда отрендерен основной компонент?

Comments

[szQocks]

гугли условная отрисовка реакта

[StepsOnes]

szQocks, так, ну это отрисовка компонента по какому либо условию, а как понять, что нужный мне компонент отрендерен и добавить значение true в условие?

[historydev]

StepsOnes, зависит от логики, если ждать ничего не нужно, используй хук жизненного цикла компонента который говорит что он отрисован

[StepsOnes]

Владимир, я уже пробывал так, у меня на лендинге довольно тяжелое видео, для реакта отрендерить компонент значит прогрузить его на страницу, html код прогружается до конца, а видео после прелоада еще какое-то время белое

[szQocks]

StepsOnes, написать хок компонент и кастомный хук, и логика следующая, отрисовывается лоадер в этом хок компоненте, а основной компонент ты отрисовываешь только тогда когда захочешь, что бы это сделать вызываешь обновление стейт через кастомный хук, в том же хок компоненте

либо использовать ленивую подгрузку и suspense

[historydev]

StepsOnes, onLoad на видео

[StepsOnes]

Владимир, предлагаешь отдельный лоад для видео сделать?

[StepsOnes]

szQocks, имеешь в виду так?

function App() {
    const [isLoading, setLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 2500)
    })

  return (
    <div>
        {
            isLoading ? <Preload /> : <Home />
        }
    </div>


  );
}

[szQocks]

StepsOnes, это условная отрисовка, да изначально я предлагал так примерно