refactor: replace serverdata with suspense query (#1265)

* refactor: replace serverdata with suspense query

* fix: deepsource issues

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -28,7 +28,6 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
     layout: createBoardLayout({
       headerActions: <BoardContentHeaderActions />,
       getInitialBoardAsync: getInitialBoard,
-      isBoardContentPage: true,
     }),
     // eslint-disable-next-line no-restricted-syntax
     page: async () => {

apps/nextjs/src/app/[locale]/boards/[name]/layout.tsx

@@ -8,5 +8,4 @@ export default createBoardLayout<{ locale: string; name: string }>({
   async getInitialBoardAsync({ name }) {
     return await api.board.getBoardByName({ name });
   },
-  isBoardContentPage: false,
 });

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -4,7 +4,6 @@ import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
 
 import { logger } from "@homarr/log";
-import { GlobalItemServerDataRunner } from "@homarr/widgets";
 
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
@@ -18,13 +17,11 @@ import { BoardMantineProvider } from "./(content)/_theme";
 interface CreateBoardLayoutProps<TParams extends Params> {
   headerActions: JSX.Element;
   getInitialBoardAsync: (params: TParams) => Promise<Board>;
-  isBoardContentPage: boolean;
 }
 
 export const createBoardLayout = <TParams extends Params>({
   headerActions,
   getInitialBoardAsync: getInitialBoard,
-  isBoardContentPage,
 }: CreateBoardLayoutProps<TParams>) => {
   const Layout = async ({
     params,
@@ -42,21 +39,19 @@ export const createBoardLayout = <TParams extends Params>({
     });
 
     return (
-      <GlobalItemServerDataRunner board={initialBoard} shouldRun={isBoardContentPage}>
-        <BoardProvider initialBoard={initialBoard}>
-          <BoardMantineProvider>
-            <CustomCss />
-            <ClientShell hasNavigation={false}>
-              <MainHeader
-                logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
-                actions={headerActions}
-                hasNavigation={false}
-              />
-              <AppShellMain>{children}</AppShellMain>
-            </ClientShell>
-          </BoardMantineProvider>
-        </BoardProvider>
-      </GlobalItemServerDataRunner>
+      <BoardProvider initialBoard={initialBoard}>
+        <BoardMantineProvider>
+          <CustomCss />
+          <ClientShell hasNavigation={false}>
+            <MainHeader
+              logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
+              actions={headerActions}
+              hasNavigation={false}
+            />
+            <AppShellMain>{children}</AppShellMain>
+          </ClientShell>
+        </BoardMantineProvider>
+      </BoardProvider>
     );
   };
 

apps/nextjs/src/components/board/items/item-content.tsx

@@ -4,7 +4,7 @@ import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { ErrorBoundary } from "react-error-boundary";
 
-import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, useServerDataFor } from "@homarr/widgets";
+import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
 
 import type { Item } from "~/app/[locale]/boards/_types";
@@ -53,7 +53,6 @@ interface InnerContentProps {
 const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
   const board = useRequiredBoard();
   const [isEditMode] = useEditMode();
-  const serverData = useServerDataFor(item.id);
   const Comp = loadWidgetDynamic(item.kind);
   const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
   const newItem = { ...item, options };
@@ -61,8 +60,6 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
   const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>
     updateItemOptions({ itemId: item.id, newOptions });
 
-  if (!serverData?.isReady) return null;
-
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
@@ -79,8 +76,6 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
           <Comp
             options={options as never}
             integrationIds={item.integrationIds}
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            serverData={serverData?.data as never}
             isEditMode={isEditMode}
             boardId={board.id}
             itemId={item.id}