feat(lazy-loading): implement lazy loading and suspense for improved performance

- Added lazy loading for NotFoundPage and TaskListFilters components to enhance initial load times.
- Wrapped lazy-loaded components in Suspense boundaries to provide loading states and improve user experience.
- Updated Vite configuration to optimize chunking strategy and preserve module signatures for better dependency management.
This commit is contained in:
chamiakJ
2025-06-21 19:15:13 +05:30
parent ddb3e2bc17
commit 2670eb2925
5 changed files with 32 additions and 18 deletions

View File

@@ -1,6 +1,7 @@
import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
import { useEffect, useState, useRef, useMemo, useCallback, lazy, Suspense } from 'react';
import { useAppSelector } from '@/hooks/useAppSelector';
import TaskListFilters from '../taskList/task-list-filters/task-list-filters';
const TaskListFilters = lazy(() => import('../taskList/task-list-filters/task-list-filters'));
import { Flex, Skeleton } from 'antd';
import BoardSectionCardContainer from './board-section/board-section-container';
import {
@@ -537,7 +538,9 @@ const ProjectViewBoard = () => {
return (
<Flex vertical gap={16}>
<TaskListFilters position={'board'} />
<Suspense fallback={<div>Loading filters...</div>}>
<TaskListFilters position={'board'} />
</Suspense>
<Skeleton active loading={isLoading} className='mt-4 p-4'>
<DndContext
sensors={sensors}