Preloader Router Components

Страницы добавлены в виде компонентов на одной странице

'use client'

import { Suspense, useState, useTransition } from 'react';

export default function Example() {
  return (
    <>
      <Suspense fallback={<BigSpinner />}>
        <Router />
      </Suspense>
    </>
  )
}

// Главная функция страниц и компонентов
function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url: any) {
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
    if (page === '/') {
      content = (
        <>
          Выберите контент
        </>
      );
    } else if (page === '/page-1') {
      content = (
        <Suspense fallback={<BigSpinner />}>
          Зазружаемый контент 1
        </Suspense>
      );
    } else if (page === '/page-2') {
      content = (
        <Suspense fallback={<BigSpinner />}>
          Зазружаемый контент 2
        </Suspense>
      );
    }
  return (
    <Layout isPending={isPending}>
      {content}

      <div className="mt-4 flex items-center gap-4">

      <NavigatePage navigate={navigate} />
      </div>
    </Layout>
  );
}

// Копонент навигации
function NavigatePage({ navigate }: any) {
  return (
    <>
      <button onClick={() => navigate('/page-1')}>
        Контент 1
      </button>

      <button onClick={() => navigate('/page-2')}>
        Контент 2
      </button>

      <button onClick={() => navigate('/')}>
        Сбросить
      </button>
    </>
  );
}

// Компоненент анимации загрузки
function Layout({ children, isPending }: any) {
  return (
    <main style={{ opacity: isPending ? 0.2 : 1 }}>
      {children}
    </main>
  );
}

// Прелоадер
function BigSpinner() {
  return <h2>Loading...</h2>;
}