perf: optimize dashboard loading and builds

2026-08-02 15:58:16 +02:00
1 parent d90e762e4b
commit de801f3f00
@@ -1,7 +1,7 @@
 "use client";

 import type { MutableRefObject, ReactNode } from "react";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Group, Loader, Menu, Switch, Text, Tooltip } from "@mantine/core";
 import {
  IconAlertTriangle,
@@ -13,7 +13,7 @@ import {
  IconTrash,
 } from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
-import { useIsFetching, useQueryClient } from "@tanstack/react-query";
+import { partialMatchKey, useIsFetching, useQueryClient } from "@tanstack/react-query";

 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
@@ -26,13 +26,14 @@ import { translateIfNecessary } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TranslationFunction } from "@homarr/translation";
 import type { WidgetContextMenuAction, WidgetDefinition } from "@homarr/widgets/definition";
+import { getWidgetQueryKeys } from "@homarr/widgets/definition";
 import { reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
-import { WidgetEditModal } from "@homarr/widgets/modals";

 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
-import { ItemMoveModal } from "./item-move-modal";
+import { LazyItemMoveModal, preloadItemMoveModal } from "./lazy-item-move-modal";
+import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";

 interface WidgetContextMenuProps {
  item: SectionItem;
@@ -43,31 +44,83 @@ interface WidgetContextMenuProps {

 export const WidgetContextMenu = ({ item, definition, widgetStateRef, children }: WidgetContextMenuProps) => {
  const { data: session } = useSession();
+  const settings = useSettings();
+
+  if (!session || !settings.enableRightClickOnWidgets) return <>{children}</>;
+
+  return (
+    <WidgetContextMenuInner item={item} definition={definition} widgetStateRef={widgetStateRef} settings={settings}>
+      {children}
+    </WidgetContextMenuInner>
+  );
+};
+
+const WidgetContextMenuInner = ({
+  item,
+  definition,
+  widgetStateRef,
+  children,
+  settings,
+}: WidgetContextMenuProps & { settings: ReturnType<typeof useSettings> }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <Menu
+      shadow="md"
+      width={300}
+      closeOnItemClick={false}
+      position="right-start"
+      offset={4}
+      opened={isMenuOpen}
+      onChange={setIsMenuOpen}
+    >
+      <Menu.ContextMenu>{children}</Menu.ContextMenu>
+      <Menu.Dropdown>
+        {isMenuOpen && (
+          <WidgetContextMenuDropdown
+            item={item}
+            definition={definition}
+            widgetStateRef={widgetStateRef}
+            settings={settings}
+          />
+        )}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
+
+type WidgetContextMenuDropdownProps = Omit<WidgetContextMenuProps, "children"> & {
+  settings: ReturnType<typeof useSettings>;
+};
+
+const WidgetContextMenuDropdown = ({ item, definition, widgetStateRef, settings }: WidgetContextMenuDropdownProps) => {
  const [isEditMode] = useEditMode();
  const board = useRequiredBoard();
  const tItem = useScopedI18n("item");
  const tMenu = useScopedI18n("item.menu.label");
  const t = useI18n();
-  const settings = useSettings();
-  const isRightClickEnabled = settings.enableRightClickOnWidgets;
-  const { openModal } = useModalAction(WidgetEditModal);
-  const { openModal: openMoveModal } = useModalAction(ItemMoveModal);
+  const hasSupportedIntegrations =
+    "supportedIntegrations" in definition && (definition.supportedIntegrations?.length ?? 0) > 0;
+  const { openModal } = useModalAction(LazyWidgetEditModal);
+  const { openModal: openMoveModal } = useModalAction(LazyItemMoveModal);
  const { openConfirmModal } = useConfirmModal();
  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
    useItemActions();
-  const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
+  const { data: integrationData, isPending } = clientApi.integration.all.useQuery(undefined, {
+    enabled: hasSupportedIntegrations,
+  });
  const { mutate: saveBoard } = clientApi.board.saveBoard.useMutation();
  const { gridstack } = useSectionContext().refs;
  const queryClient = useQueryClient();

-  const widgetQueryKey = useMemo(
-    () => ("queryKey" in definition ? (definition.queryKey as QueryKey) : [["widget", item.kind]]),
-    [definition, item.kind],
-  );
-  const isWidgetFetching = useIsFetching({ queryKey: widgetQueryKey }) > 0;
+  const widgetQueryKeys = useMemo(() => getWidgetQueryKeys(definition, item.kind), [definition, item.kind]);
+  const isWidgetFetching =
+    useIsFetching({
+      predicate: (query) => widgetQueryKeys.some((queryKey) => partialMatchKey(query.queryKey, queryKey)),
+    }) > 0;
  const handleRefetch = useCallback(() => {
-    void queryClient.refetchQueries({ queryKey: widgetQueryKey, type: "all" });
-  }, [queryClient, widgetQueryKey]);
+    void Promise.all(widgetQueryKeys.map((queryKey) => queryClient.refetchQueries({ queryKey, type: "all" })));
+  }, [queryClient, widgetQueryKeys]);

  const options = useMemo(
    () => reduceWidgetOptionsWithDefinition(definition, settings, item.options),
@@ -107,6 +160,7 @@ export const WidgetContextMenu = ({ item, definition, widgetStateRef, children }
    openModal(
      {
        kind: item.kind,
+        definition,
        value: {
          advancedOptions: item.advancedOptions,
          options: item.options,
@@ -168,135 +222,133 @@ export const WidgetContextMenu = ({ item, definition, widgetStateRef, children }
    [options, item.id, updateItemOptions, persistBoard, board],
  );

-  if (!session) return <>{children}</>;
-  if (!isRightClickEnabled) return <>{children}</>;
-
  const visibleWidgetActions = widgetContextActions.filter((a) => !a.hidden);

  return (
-    <Menu shadow="md" width={300} closeOnItemClick={false} position="right-start" offset={4}>
-      <Menu.ContextMenu>{children}</Menu.ContextMenu>
-      <Menu.Dropdown>
-        {toggleOptions.length > 0 && (
-          <>
-            <Menu.Label>{tMenu("options")}</Menu.Label>
-            {toggleOptions.map(([key]) => (
-              <Menu.Item key={key} onClick={() => handleToggle(key)(!options[key])}>
-                {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                <Group wrap="nowrap">
-                  {String(translateIfNecessary(t, ((fn: any) => fn(`widget.${item.kind}.option.${key}.label`)) as any))}
-                  <Switch size="xs" checked={Boolean(options[key])} readOnly tabIndex={-1} ml="auto" />
-                </Group>
-              </Menu.Item>
-            ))}
-          </>
-        )}
-
-        {visibleWidgetActions.length > 0 && (
-          <>
-            {toggleOptions.length > 0 && <Menu.Divider />}
-            <Menu.Label>{tMenu("actions")}</Menu.Label>
-            {visibleWidgetActions.map((action) => {
-              const Icon = action.icon;
-              return (
-                <Menu.Item
-                  key={action.key}
-                  closeMenuOnClick
-                  leftSection={Icon ? <Icon size={16} /> : undefined}
-                  onClick={action.onClick}
-                  disabled={action.disabled}
-                  color={action.color}
-                >
-                  {String(translateIfNecessary(t, action.label))}
-                </Menu.Item>
-              );
-            })}
-          </>
-        )}
-
-        {isEditMode && (
-          <>
-            {(toggleOptions.length > 0 || visibleWidgetActions.length > 0) && <Menu.Divider />}
-            <Menu.Item
-              closeMenuOnClick
-              leftSection={<IconLayoutKanban size={16} />}
-              onClick={() => {
-                if (!gridstack.current) return;
-                openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
-              }}
-            >
-              {tItem("action.moveResize")}
-            </Menu.Item>
-            <Menu.Item
-              closeMenuOnClick
-              leftSection={<IconCopy size={16} />}
-              onClick={() => duplicateItem({ itemId: item.id })}
-            >
-              {tItem("action.duplicate")}
-            </Menu.Item>
-          </>
-        )}
-
+    <>
+      {toggleOptions.length > 0 && (
        <>
-          {(toggleOptions.length > 0 || visibleWidgetActions.length > 0 || isEditMode) && <Menu.Divider />}
+          <Menu.Label>{tMenu("options")}</Menu.Label>
+          {toggleOptions.map(([key]) => (
+            <Menu.Item key={key} onClick={() => handleToggle(key)(!options[key])}>
+              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+              <Group wrap="nowrap">
+                {String(translateIfNecessary(t, ((fn: any) => fn(`widget.${item.kind}.option.${key}.label`)) as any))}
+                <Switch size="xs" checked={Boolean(options[key])} readOnly tabIndex={-1} ml="auto" />
+              </Group>
+            </Menu.Item>
+          ))}
+        </>
+      )}
+
+      {visibleWidgetActions.length > 0 && (
+        <>
+          {toggleOptions.length > 0 && <Menu.Divider />}
+          <Menu.Label>{tMenu("actions")}</Menu.Label>
+          {visibleWidgetActions.map((action) => {
+            const Icon = action.icon;
+            return (
+              <Menu.Item
+                key={action.key}
+                closeMenuOnClick
+                leftSection={Icon ? <Icon size={16} /> : undefined}
+                onClick={action.onClick}
+                disabled={action.disabled}
+                color={action.color}
+              >
+                {String(translateIfNecessary(t, action.label))}
+              </Menu.Item>
+            );
+          })}
+        </>
+      )}
+
+      {isEditMode && (
+        <>
+          {(toggleOptions.length > 0 || visibleWidgetActions.length > 0) && <Menu.Divider />}
          <Menu.Item
-            leftSection={isWidgetFetching ? <Loader size={16} /> : <IconRefresh size={16} />}
-            onClick={handleRefetch}
-            disabled={isWidgetFetching}
+            closeMenuOnClick
+            leftSection={<IconLayoutKanban size={16} />}
+            onFocus={preloadItemMoveModal}
+            onPointerEnter={preloadItemMoveModal}
+            onClick={() => {
+              if (!gridstack.current) return;
+              openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
+            }}
          >
-            <Group justify="space-between" wrap="nowrap" gap="sm">
-              {tMenu("refresh")}
-              <WidgetQueryStatus
-                queryClient={queryClient}
-                queryKey={widgetQueryKey}
-                isFetching={isWidgetFetching}
-                t={t}
-              />
-            </Group>
+            {tItem("action.moveResize")}
          </Menu.Item>
          <Menu.Item
            closeMenuOnClick
-            leftSection={<IconSettings size={16} />}
-            onClick={openEditModal}
-            disabled={isPending}
+            leftSection={<IconCopy size={16} />}
+            onClick={() => duplicateItem({ itemId: item.id })}
          >
-            {tMenu("settings")}
+            {tItem("action.duplicate")}
          </Menu.Item>
        </>
+      )}

-        {isEditMode && (
-          <>
-            <Menu.Divider />
-            <Menu.Item
-              closeMenuOnClick
-              color="red"
-              leftSection={<IconTrash size={16} />}
-              onClick={() => {
-                openConfirmModal({
-                  title: tItem("remove.title"),
-                  children: tItem("remove.message"),
-                  onConfirm: () => removeItem({ itemId: item.id }),
-                });
-              }}
-            >
-              {tItem("action.remove")}
-            </Menu.Item>
-          </>
-        )}
-      </Menu.Dropdown>
-    </Menu>
+      <>
+        {(toggleOptions.length > 0 || visibleWidgetActions.length > 0 || isEditMode) && <Menu.Divider />}
+        <Menu.Item
+          leftSection={isWidgetFetching ? <Loader size={16} /> : <IconRefresh size={16} />}
+          onClick={handleRefetch}
+          disabled={isWidgetFetching}
+        >
+          <Group justify="space-between" wrap="nowrap" gap="sm">
+            {tMenu("refresh")}
+            <WidgetQueryStatus
+              queryClient={queryClient}
+              queryKeys={widgetQueryKeys}
+              isFetching={isWidgetFetching}
+              t={t}
+            />
+          </Group>
+        </Menu.Item>
+        <Menu.Item
+          closeMenuOnClick
+          leftSection={<IconSettings size={16} />}
+          onClick={openEditModal}
+          onFocus={preloadWidgetEditModal}
+          onPointerEnter={preloadWidgetEditModal}
+          disabled={hasSupportedIntegrations && isPending}
+        >
+          {tMenu("settings")}
+        </Menu.Item>
+      </>
+
+      {isEditMode && (
+        <>
+          <Menu.Divider />
+          <Menu.Item
+            closeMenuOnClick
+            color="red"
+            leftSection={<IconTrash size={16} />}
+            onClick={() => {
+              openConfirmModal({
+                title: tItem("remove.title"),
+                children: tItem("remove.message"),
+                onConfirm: () => removeItem({ itemId: item.id }),
+              });
+            }}
+          >
+            {tItem("action.remove")}
+          </Menu.Item>
+        </>
+      )}
+    </>
  );
 };

 interface WidgetQueryStatusProps {
  queryClient: QueryClient;
-  queryKey: QueryKey;
+  queryKeys: QueryKey[];
  isFetching: boolean;
  t: TranslationFunction;
 }

-const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQueryStatusProps) => {
-  const queries = queryClient.getQueryCache().findAll({ queryKey });
+const WidgetQueryStatus = ({ queryClient, queryKeys, isFetching, t }: WidgetQueryStatusProps) => {
+  const queries = [...new Set(queryKeys.flatMap((queryKey) => queryClient.getQueryCache().findAll({ queryKey })))];
  const timestamps = queries.map((query) => query.state.dataUpdatedAt).filter(Boolean);
  const latest = timestamps.length > 0 ? Math.max(...timestamps) : 0;
  const ageLabel = useTimeAgo(new Date(latest));
@@ -334,7 +386,8 @@ const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQuery
        <Group gap={4} wrap="nowrap">
          <IconAlertTriangle size={12} color="var(--mantine-color-red-6)" />
          <Text size="xs" c="red.6">
-            {t("item.menu.status.error")} · {ageLabel}
+            {t("item.menu.status.error")}
+            {latest > 0 && ` · ${ageLabel}`}
          </Text>
        </Group>
      </Tooltip>
@@ -345,7 +398,8 @@ const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQuery
    <Group gap={4} wrap="nowrap">
      <IconCircleCheck size={12} color="var(--mantine-color-green-6)" />
      <Text size="xs" c="dimmed">
-        {t("item.menu.status.success")} · {ageLabel}
+        {t("item.menu.status.success")}
+        {latest > 0 && ` · ${ageLabel}`}
      </Text>
    </Group>
  );