feat: loading and error pages
This commit is contained in:
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user