Как показать preloader до загрузки страницы?

В React можно показать preloader или loading spinner до загрузки страницы с помощью состояния компонента и условного рендеринга.

Сначала, создайте состояние компонента для отображения preloader, например, isLoading, и установите его значение в true:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Имитируем задержку загрузки данных
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      {isLoading ? (
        // Показываем preloader, пока isLoading равно true
        <div className="preloader">Loading...</div>
      ) : (
        // Рендерим содержимое страницы после загрузки
        <div className="content">Content loaded!</div>
      )}
    </div>
  );
}

export default App;

Здесь мы задаем значение isLoading по умолчанию как true с помощью useState, чтобы показать preloader в начале. Затем, мы используем useEffect для имитации задержки загрузки данных (в данном случае, с помощью setTimeout на 2 секунды) и устанавливаем значение isLoading в false после этой задержки.

Затем мы используем условный оператор (тернарный оператор) для рендеринга либо preloader, если isLoading равно true, либо содержимого страницы, если isLoading равно false.

Когда isLoading становится false, компонент будет обновлен и покажет содержимое страницы.

Вы можете изменить сообщение preloader и его внешний вид, добавив или изменяя классы CSS в соответствующем dive с классом preloader.

В итоге, когда страница загружается, preloader будет показан на экране до тех пор, пока данные не будут загружены и установлен флаг isLoading в false.