Ленивая подгрузка страниц редактирования квиза

src/pages/ResultPage/ResultPage.tsx

@@ -7,7 +7,7 @@ import {
 import { Box, Button } from "@mui/material";
 import ArrowLeft from "@icons/questionsPage/arrowLeft";
 
-export const ResultPage = () => {
+export default () => {
   return (
     <>
       <FirstEntry />

src/pages/startPage/EditPage.tsx

@@ -1,40 +1,24 @@
-import { quizApi } from "@api/quiz";
-import EyeIcon from "@icons/EyeIcon";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-
 import {
   Box,
-  Button,
-  IconButton,
-  Switch,
-  Typography,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions";
+import { updateQuiz, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
-import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useDebouncedCallback } from "use-debounce";
-import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile";
+import { cleanQuestions } from "@root/questions/actions";
-import {
-  cleanQuestions,
-  createResult,
-  setQuestions,
-} from "@root/questions/actions";
 import {
   updateCanCreatePublic,
   updateModalInfoWhyCantCreate,
   setShowConfirmLeaveModal,
   updateSomeWorkBackend,
 } from "@root/uiTools/actions";
-import { Header } from "@ui_kit/Header/Header";
 import { useQuestionsStore } from "@root/questions/store";
-import { questionApi } from "@api/question";
 import { useUiTools } from "@root/uiTools/store";
 
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";

src/ui_kit/switchStepPages.tsx

@@ -1,19 +1,23 @@
+import type { SuspenseProps } from "react";
+import { lazy, Suspense } from "react";
 import {
   QuizResultsType,
   QuizStartpageType,
   QuizType,
 } from "@model/quizSettings";
-import ContactFormPage from "../pages/ContactFormPage/ContactFormPage";
-import InstallQuiz from "../pages/InstallQuiz/InstallQuiz";
-import FormQuestionsPage from "../pages/Questions/Form/FormQuestionsPage";
-import QuestionsPage from "../pages/Questions/QuestionsPage";
-import { QuestionsMap } from "../pages/QuestionsMap";
-import { ResultPage } from "../pages/ResultPage/ResultPage";
-import { ResultSettings } from "../pages/ResultPage/ResultSettings";
-import StartPageSettings from "../pages/startPage/StartPageSettings";
-import StepOne from "../pages/startPage/stepOne";
-import Steptwo from "../pages/startPage/steptwo";
 
+const ContactFormPage = lazy(() => import("../pages/ContactFormPage/ContactFormPage"));
+const InstallQuiz = lazy(() => import("../pages/InstallQuiz/InstallQuiz"));
+const FormQuestionsPage = lazy(() => import("../pages/Questions/Form/FormQuestionsPage"));
+const QuestionsPage = lazy(() => import("../pages/Questions/QuestionsPage"));
+const ResultPage = lazy(() => import("../pages/ResultPage/ResultPage"));
+const StartPageSettings = lazy(() => import("../pages/startPage/StartPageSettings"));
+const StepOne = lazy(() => import("../pages/startPage/stepOne"));
+const Steptwo = lazy(() => import("../pages/startPage/steptwo"));
+
+const LazyLoading = ({ children, fallback }: SuspenseProps) => (
+  <Suspense fallback={fallback ?? <></>}>{children}</Suspense>
+);
 interface Props {
   activeStep: number;
   quizType: QuizType;
@@ -28,33 +32,32 @@ export default function SwitchStepPages({
   activeStep = 1,
   quizType,
   quizStartPageType,
-  quizResults,
   openBranchingPage,
   setOpenBranchingPage,
   widthMain,
 }: Props) {
   switch (activeStep) {
     case 0: {
-      if (!quizType) return <StepOne />;
+      if (!quizType) return <LazyLoading><StepOne /></LazyLoading>;
-      if (!quizStartPageType) return <Steptwo />;
+      if (!quizStartPageType) return <LazyLoading><Steptwo /></LazyLoading>;
-      return <StartPageSettings />;
+      return <LazyLoading><StartPageSettings /></LazyLoading>;
     }
     case 1:
       return quizType === "form" ? (
-        <FormQuestionsPage />
+        <LazyLoading><FormQuestionsPage /></LazyLoading>
       ) : (
-        <QuestionsPage
+        <LazyLoading><QuestionsPage
           openBranchingPage={openBranchingPage}
           setOpenBranchingPage={setOpenBranchingPage}
           widthMain={widthMain}
-        />
+        /></LazyLoading>
       );
     case 2:
-      return <ResultPage />;
+      return <LazyLoading><ResultPage /></LazyLoading>;
     case 3:
-      return <ContactFormPage />;
+      return <LazyLoading><ContactFormPage /></LazyLoading>;
     case 4:
-      return <InstallQuiz />;
+      return <LazyLoading><InstallQuiz /></LazyLoading>;
     default:
       throw new Error(`Invalid quiz setup step: ${activeStep}`);
   }