feat: loading and error pages

This commit is contained in:
2025-08-30 23:46:46 +04:00
parent 26c7209de0
commit ab7ef1e753
8 changed files with 123 additions and 89 deletions

View File

@ -3,19 +3,28 @@ import {
HydrationBoundary,
QueryClient,
} from "@tanstack/react-query";
import PageBody from "@/app/deals/components/shared/PageBody/PageBody";
import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
import { ViewContextProvider } from "@/app/deals/contexts/ViewContext";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import PageContainer from "@/components/layout/PageContainer/PageContainer";
import { Suspense } from "react";
import { Loader, Center } from "@mantine/core";
import dynamic from "next/dynamic";
import {
getBoardsOptions,
getProjectsOptions,
} from "@/lib/client/@tanstack/react-query.gen";
import { combineProviders } from "@/utils/combineProviders";
import TopToolPanel from "./components/desktop/TopToolPanel/TopToolPanel";
// Dynamic imports for better code splitting
const PageBody = dynamic(() => import("@/app/deals/components/shared/PageBody/PageBody"), {
loading: () => <Center h={400}><Loader /></Center>
});
const BoardsContextProvider = dynamic(() => import("@/app/deals/contexts/BoardsContext").then(mod => ({ default: mod.BoardsContextProvider })));
const ProjectsContextProvider = dynamic(() => import("@/app/deals/contexts/ProjectsContext").then(mod => ({ default: mod.ProjectsContextProvider })));
const StatusesContextProvider = dynamic(() => import("@/app/deals/contexts/StatusesContext").then(mod => ({ default: mod.StatusesContextProvider })));
const ViewContextProvider = dynamic(() => import("@/app/deals/contexts/ViewContext").then(mod => ({ default: mod.ViewContextProvider })));
const PageBlock = dynamic(() => import("@/components/layout/PageBlock/PageBlock"));
const PageContainer = dynamic(() => import("@/components/layout/PageContainer/PageContainer"));
const TopToolPanel = dynamic(() => import("./components/desktop/TopToolPanel/TopToolPanel"), {
loading: () => <div style={{ height: 60 }} />
});
async function prefetchData() {
const queryClient = new QueryClient();
@ -44,12 +53,18 @@ export default async function DealsPage() {
return (
<Providers>
<PageContainer>
<TopToolPanel />
<PageBlock>
<PageBody />
</PageBlock>
</PageContainer>
<Suspense fallback={
<Center h="50vh">
<Loader size="lg" />
</Center>
}>
<PageContainer>
<TopToolPanel />
<PageBlock>
<PageBody />
</PageBlock>
</PageContainer>
</Suspense>
</Providers>
);
}