fix: update check blocks page loading (#2782)

apps/nextjs/src/components/layout/header/update.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { Suspense, use } from "react";
+import { Indicator, Menu, Text } from "@mantine/core";
+import { IconBellRinging } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface UpdateIndicatorProps extends PropsWithChildren {
+  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]> | undefined;
+  disabled: boolean;
+}
+
+export const UpdateIndicator = ({ children, availableUpdatesPromise, disabled }: UpdateIndicatorProps) => {
+  if (disabled || availableUpdatesPromise === undefined) {
+    return children;
+  }
+
+  return (
+    <Suspense fallback={children}>
+      <InnerUpdateIndicator availableUpdatesPromise={availableUpdatesPromise} disabled={disabled}>
+        {children}
+      </InnerUpdateIndicator>
+    </Suspense>
+  );
+};
+
+interface InnerUpdateIndicatorProps extends PropsWithChildren {
+  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]>;
+  disabled: boolean;
+}
+
+const InnerUpdateIndicator = ({ children, disabled, availableUpdatesPromise }: InnerUpdateIndicatorProps) => {
+  const availableUpdates = use(availableUpdatesPromise);
+
+  return (
+    <Indicator
+      disabled={!availableUpdates || availableUpdates.length === 0 || disabled}
+      size={15}
+      processing
+      withBorder
+    >
+      {children}
+    </Indicator>
+  );
+};
+
+interface AvailableUpdatesMenuItemProps {
+  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]> | undefined;
+}
+
+export const AvailableUpdatesMenuItem = ({ availableUpdatesPromise }: AvailableUpdatesMenuItemProps) => {
+  if (availableUpdatesPromise === undefined) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={null}>
+      <InnerAvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
+    </Suspense>
+  );
+};
+
+interface InnerAvailableUpdatesMenuItemProps {
+  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]>;
+}
+
+const InnerAvailableUpdatesMenuItem = ({ availableUpdatesPromise }: InnerAvailableUpdatesMenuItemProps) => {
+  const t = useScopedI18n("common.userAvatar.menu");
+  const availableUpdates = use(availableUpdatesPromise);
+  if (availableUpdates === undefined || availableUpdates.length === 0) {
+    return null;
+  }
+
+  const latestUpdate = availableUpdates.at(0);
+  if (!latestUpdate) return null;
+
+  return (
+    <>
+      <Menu.Item component={"a"} href={latestUpdate.url} target="_blank" leftSection={<IconBellRinging size="1rem" />}>
+        <Text fw="bold" size="sm">
+          {t("updateAvailable", {
+            countUpdates: String(availableUpdates.length),
+            tag: latestUpdate.tagName,
+          })}
+        </Text>
+      </Menu.Item>
+      <Menu.Divider />
+    </>
+  );
+};

apps/nextjs/src/components/layout/header/user.tsx

@@ -1,21 +1,25 @@
-import { Indicator, UnstyledButton } from "@mantine/core";
+import { Suspense } from "react";
+import { UnstyledButton } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 
 import { CurrentUserAvatar } from "~/components/user-avatar";
 import { UserAvatarMenu } from "~/components/user-avatar-menu";
+import { UpdateIndicator } from "./update";
 
 export const UserButton = async () => {
   const session = await auth();
   const isAdmin = session?.user.permissions.includes("admin");
-  const data = isAdmin ? await api.updateChecker.getAvailableUpdates() : undefined;
+  const availableUpdatesPromise = isAdmin ? api.updateChecker.getAvailableUpdates() : undefined;
   return (
-    <UserAvatarMenu availableUpdates={data}>
+    <UserAvatarMenu availableUpdatesPromise={availableUpdatesPromise}>
       <UnstyledButton>
-        <Indicator disabled={data?.length === 0 || !isAdmin} size={15} processing withBorder>
-          <CurrentUserAvatar size="md" />
-        </Indicator>
+        <Suspense fallback={<CurrentUserAvatar size="md" />}>
+          <UpdateIndicator availableUpdatesPromise={availableUpdatesPromise} disabled={!isAdmin}>
+            <CurrentUserAvatar size="md" />
+          </UpdateIndicator>
+        </Suspense>
       </UnstyledButton>
     </UserAvatarMenu>
   );