Merge branch 'dev' into feat/demo-mode-seed

Co-authored-by: Manuel <30572287+manuel-rw@users.noreply.github.com>

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

@@ -1,27 +1,70 @@
 "use client";
 
-import { Box, Stack } from "@mantine/core";
+import { useCallback, useRef } from "react";
+import { Box, LoadingOverlay, Stack } from "@mantine/core";
 
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 
 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
 import { BoardBackgroundVideo } from "~/components/layout/background";
+import { fullHeightWithoutHeaderAndFooter } from "~/constants";
+import { useIsBoardReady } from "./_ready-context";
+
+let boardName: string | null = null;
+
+export const updateBoardName = (name: string | null) => {
+  boardName = name;
+};
+
+type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"];
+
+export const useUpdateBoard = () => {
+  const utils = clientApi.useUtils();
+
+  const updateBoard = useCallback(
+    (updaterWithoutUndefined: UpdateCallback) => {
+      if (!boardName) {
+        throw new Error("Board name is not set");
+      }
+      utils.board.getBoardByName.setData({ name: boardName }, (previous) =>
+        previous ? updaterWithoutUndefined(previous) : previous,
+      );
+    },
+    [utils],
+  );
+
+  return {
+    updateBoard,
+  };
+};
 
 export const ClientBoard = () => {
   const board = useRequiredBoard();
   const currentLayoutId = useCurrentLayout();
+  const isReady = useIsBoardReady();
 
   const fullWidthSortedSections = board.sections
     .filter((section) => section.kind === "empty" || section.kind === "category")
     .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
 
+  const ref = useRef<HTMLDivElement>(null);
+
   return (
     <Box h="100%" pos="relative">
       <BoardBackgroundVideo />
-      <Stack h="100%">
+      <LoadingOverlay
+        visible={!isReady}
+        transitionProps={{ duration: 500 }}
+        loaderProps={{ size: "lg" }}
+        h={fullHeightWithoutHeaderAndFooter}
+      />
+      <Stack ref={ref} h="100%" style={{ visibility: isReady ? "visible" : "hidden" }}>
         {fullWidthSortedSections.map((section) =>
           section.kind === "empty" ? (
+            // Unique keys per layout to always reinitialize the gridstack
             <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
           ) : (
             <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />

apps/nextjs/src/app/[locale]/boards/(content)/_ready-context.tsx

@@ -1,19 +1,42 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { createContext, useCallback, useContext } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+
+import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 
 const BoardReadyContext = createContext<{
+  isReady: boolean;
   markAsReady: (id: string) => void;
 } | null>(null);
 
 export const BoardReadyProvider = ({ children }: PropsWithChildren) => {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const markAsReady = useCallback((_id: string) => {}, []);
+  const pathname = usePathname();
+  const utils = clientApi.useUtils();
+  const board = useRequiredBoard();
+  const [readySections, setReadySections] = useState<string[]>([]);
+
+  // Reset sections required for ready state
+  useEffect(() => {
+    return () => {
+      setReadySections([]);
+    };
+  }, [pathname, utils]);
+
+  useEffect(() => {
+    setReadySections((previous) => previous.filter((id) => board.sections.some((section) => section.id === id)));
+  }, [board.sections.length, setReadySections]);
+
+  const markAsReady = useCallback((id: string) => {
+    setReadySections((previous) => (previous.includes(id) ? previous : [...previous, id]));
+  }, []);
 
   return (
     <BoardReadyContext.Provider
       value={{
+        isReady: board.sections.length === readySections.length,
         markAsReady,
       }}
     >
@@ -31,3 +54,13 @@ export const useMarkSectionAsReady = () => {
 
   return context.markAsReady;
 };
+
+export const useIsBoardReady = () => {
+  const context = useContext(BoardReadyContext);
+
+  if (!context) {
+    throw new Error("BoardReadyProvider is required");
+  }
+
+  return context.isReady;
+};