feat: add widget server loader (#16)

* wip: Add gridstack board

* wip: Centralize board pages, Add board settings page

* fix: remove cyclic dependency and rename widget-sort to kind

* improve: Add header actions as parallel route

* feat: add item select modal, add category edit modal,

* feat: add edit item modal

* feat: add remove item modal

* wip: add category actions

* feat: add saving of board, wip: add app widget

* Merge branch 'main' into add-board

* chore: update turbo dependencies

* chore: update mantine dependencies

* chore: fix typescript errors, lint and format

* feat: add confirm modal to category removal, move items of removed category to above wrapper

* feat: remove app widget to continue in another branch

* feat: add loading spinner until board is initialized

* fix: issue with cellheight of gridstack items

* feat: add translations for board

* fix: issue with translation for settings page

* feat: add widget server loader

* fix: typing issue

* chore: address pull request feedback

* fix: formatting

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

@@ -13,6 +13,8 @@ import type { Board } from "./_types";
 // This is placed here because it's used in the layout and the page and because it's here it's not needed to load it everywhere
 import "../../../styles/gridstack.scss";
 
+import { GlobalItemServerDataRunner } from "@homarr/widgets";
+
 type Params = Record<string, unknown>;
 
 interface Props<TParams extends Params> {
@@ -31,16 +33,18 @@ export const createBoardPage = <TParams extends Record<string, unknown>>({
       const initialBoard = await getInitialBoard(params);
 
       return (
-        <BoardProvider initialBoard={initialBoard}>
-          <ClientShell hasNavigation={false}>
-            <MainHeader
-              logo={<BoardLogoWithTitle size="md" />}
-              actions={headeractions}
-              hasNavigation={false}
-            />
-            <AppShellMain>{children}</AppShellMain>
-          </ClientShell>
-        </BoardProvider>
+        <GlobalItemServerDataRunner board={initialBoard}>
+          <BoardProvider initialBoard={initialBoard}>
+            <ClientShell hasNavigation={false}>
+              <MainHeader
+                logo={<BoardLogoWithTitle size="md" />}
+                actions={headeractions}
+                hasNavigation={false}
+              />
+              <AppShellMain>{children}</AppShellMain>
+            </ClientShell>
+          </BoardProvider>
+        </GlobalItemServerDataRunner>
       );
     },
     page: () => {

apps/nextjs/src/components/board/sections/content.tsx

@@ -17,6 +17,7 @@ import {
 import {
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,
+  useServerDataFor,
 } from "@homarr/widgets";
 
 import type { Item } from "~/app/[locale]/boards/_types";
@@ -62,13 +63,21 @@ interface ItemProps {
 }
 
 const BoardItem = ({ item }: ItemProps) => {
+  const serverData = useServerDataFor(item.id);
   const Comp = loadWidgetDynamic(item.kind);
   const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
   const newItem = { ...item, options };
+
+  if (!serverData?.isReady) return null;
+
   return (
     <>
       <ItemMenu offset={8} item={newItem} />
-      <Comp options={options as never} integrations={item.integrations} />
+      <Comp
+        options={options as never}
+        integrations={item.integrations}
+        serverData={serverData?.data as never}
+      />
     </>
   );
 };