added lazy and suspense to all containers of the main page

planner-front/src/containers/MonthCalendar/MonthCalendar.js

 import { useEffect, useCallback, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import CalendarModalWorkerContent from '../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent';
-import MonthCalendarBody from '../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
-import MonthCalendarHeader from '../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
-import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';
+// import CalendarModalWorkerContent from '../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent';
+// import MonthCalendarBody from '../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
+// import MonthCalendarHeader from '../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
+// import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';
 import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers';
 import { fetchAllUserProjects, fetchProject } from '../../store/actions/projectsActions';
 import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
 import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersActions';
 import { AllHoursOneHourFormat, AllHoursTwoHourFormat } from '../../constants';
 
+// make components mentioned above in lazy import
+import { lazy ,Suspense} from 'react';
+const CalendarModalWorkerContent = lazy(() => import('../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent'));
+const MonthCalendarBody = lazy(() => import('../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody'));
+const MonthCalendarHeader = lazy(() => import('../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader'));
+const DefaultModal = lazy(() => import('../../components/UI/DefaultModal/DefaultModal'));
+
+
 function MonthCalendar() {
   const dispatch = useDispatch();
 

planner-front/src/containers/MyTasks/MyTasks.js

 import Paper from '@mui/material/Paper';
-import MyTasksTableToolbar from '../../components/MyTasksCompoments/MyTasksTableToolbar/MyTasksTableToolbar';
-import MyTasksTablePagination from '../../components/MyTasksCompoments/MyTasksTablePagination/MyTasksTablePagination';
-import MyTasksTableContainer from '../../components/MyTasksCompoments/MyTasksTableContainer/MyTasksTableContainer';
+// import MyTasksTableToolbar from '../../components/MyTasksCompoments/MyTasksTableToolbar/MyTasksTableToolbar';
+// import MyTasksTablePagination from '../../components/MyTasksCompoments/MyTasksTablePagination/MyTasksTablePagination';
+// import MyTasksTableContainer from '../../components/MyTasksCompoments/MyTasksTableContainer/MyTasksTableContainer';
 import { activateCreateCopyTasksMode, fetchAllTasks, sortTaskByProjects, addTask, deleteTask, deleteDateTimeTask, editTask } from '../../store/actions/tasksActions';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useCallback, useEffect, useState } from 'react';
@@ -9,6 +9,13 @@ import { fetchAllUserProjects, fetchProjects } from '../../store/actions/project
 import moment from 'moment';
 import { useNavigate } from 'react-router-dom';
 
+// make components mentioned above in lazy import
+import { lazy , Suspense} from "react";
+const MyTasksTableToolbar = lazy(() => import("../../components/MyTasksCompoments/MyTasksTableToolbar/MyTasksTableToolbar"));
+const MyTasksTablePagination = lazy(() => import("../../components/MyTasksCompoments/MyTasksTablePagination/MyTasksTablePagination"));
+const MyTasksTableContainer = lazy(() => import("../../components/MyTasksCompoments/MyTasksTableContainer/MyTasksTableContainer"));
+
+
 export default function MyTasks() {
   const dispatch = useDispatch();
   const navigate = useNavigate()

planner-front/src/containers/Projects/Projects.js

@@ -2,11 +2,17 @@ import { Grid } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { createProject, deleteProject, fetchProjects } from "../../store/actions/projectsActions";
-import FullProject from "../FullProject/FullProject";
-import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper";
-import DefaultModal from "../../components/UI/DefaultModal/DefaultModal";
+// import FullProject from "../FullProject/FullProject";
+// import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper";
+// import DefaultModal from "../../components/UI/DefaultModal/DefaultModal";
 import NewProjectModalContent from "../../components/ProjectsComponents/NewProjectModalContent/NewProjectModalContent";
 
+// make components mentioned above in lazy import
+import { lazy , Suspense} from "react";
+const FullProject = lazy(() => import("../FullProject/FullProject"));
+const ProjectsWrapper = lazy(() => import("../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper"));
+const DefaultModal = lazy(() => import("../../components/UI/DefaultModal/DefaultModal"));
+
 const Projects = () => {
     const { projects } = useSelector(state => state.projects.projects);
     const { user } = useSelector(state => state.users)

planner-front/src/containers/UsersTasks/UsersTasks.js

@@ -9,6 +9,12 @@ import { fetchAllUserProjects, fetchProjects } from '../../store/actions/project
 import moment from 'moment';
 import { useNavigate } from 'react-router-dom';
 
+import { lazy } from "react";
+// const UsersTasksTableToolbar = lazy(() => import("../../components/UsersTasksCompoments/UsersTasksTableToolbar/UsersTasksTableToolbar"));
+// const UsersTasksTablePagination = lazy(() => import("../../components/UsersTasksCompoments/UsersTasksTablePagination/UsersTasksTablePagination"));
+// const UsersTasksTableContainer = lazy(() => import("../../components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableContainer"));
+
+
 export default function UsersTasks() {
   const dispatch = useDispatch();
   const navigate = useNavigate()

planner-front/src/containers/WeekCalendar/WeekCalendar.js

@@ -3,17 +3,29 @@ import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
-import CreateCopyTasksModeBlock from '../../components/Calendars/CreateCopyTasksModeBlock/CreateCopyTasksModeBlock';
-import CalendarModalWorkerContent from '../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent';
-import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
-import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader';
-import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';
+// import CreateCopyTasksModeBlock from '../../components/Calendars/CreateCopyTasksModeBlock/CreateCopyTasksModeBlock';
+// import CalendarModalWorkerContent from '../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent';
+// import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
+// import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader';
+// import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';
 import { AllHoursOneHourFormat, AllHoursTwoHourFormat } from '../../constants';
 import { getWeekInfoString, getWeekFromCurrentDate, dateToISOLikeButLocal } from '../../helpers/CalendarHelpers';
 import { fetchAllUserProjects } from '../../store/actions/projectsActions';
 import { addCalendarTask, addCopyCalendarTask, deactivateCreateCopyTasksMode, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
 import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersActions';
 
+// make components mentioned above in lazy import
+import { lazy, Suspense } from 'react';
+const WeekCalendarBody = lazy(() => import('../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody'));
+const WeekCalendarHeader = lazy(() => import('../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader'));
+const CreateCopyTasksModeBlock = lazy(() => import('../../components/Calendars/CreateCopyTasksModeBlock/CreateCopyTasksModeBlock'));
+const CalendarModalWorkerContent = lazy(() => import('../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent'));
+const DefaultModal = lazy(() => import('../../components/UI/DefaultModal/DefaultModal'));
+
+
+
+
+
 function WeekCalendar() {
   const dispatch = useDispatch();
   const navigate = useNavigate()