fix: context menu refresh stays open with loading spinner, cache age reacts to refetch

apps/nextjs/src/components/board/items/widget-context-menu.tsx

@@ -2,10 +2,10 @@
 
 import type { MutableRefObject, ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Group, Menu, Switch, Text } from "@mantine/core";
+import { Group, Loader, Menu, Switch, Text } from "@mantine/core";
 import { IconCopy, IconLayoutKanban, IconRefresh, IconSettings, IconTrash } from "@tabler/icons-react";
 import type { QueryClient } from "@tanstack/react-query";
-import { useQueryClient } from "@tanstack/react-query";
+import { useIsFetching, useQueryClient } from "@tanstack/react-query";
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
@@ -50,8 +50,9 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
   const queryClient = useQueryClient();
 
   const widgetQueryKey = useMemo(() => [["widget", item.kind]], [item.kind]);
+  const isWidgetFetching = useIsFetching({ queryKey: widgetQueryKey }) > 0;
   const handleRefetch = useCallback(() => {
-    void queryClient.invalidateQueries({ queryKey: widgetQueryKey });
+    void queryClient.refetchQueries({ queryKey: widgetQueryKey, type: "all" });
   }, [queryClient, widgetQueryKey]);
 
   const options = useMemo(
@@ -223,7 +224,7 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
 
         <>
           {(toggleOptions.length > 0 || visibleWidgetActions.length > 0 || isEditMode) && <Menu.Divider />}
-          <Menu.Item closeMenuOnClick leftSection={<IconRefresh size={16} />} onClick={handleRefetch}>
+          <Menu.Item leftSection={isWidgetFetching ? <Loader size={16} /> : <IconRefresh size={16} />} onClick={handleRefetch} disabled={isWidgetFetching}>
             <Group justify="space-between" wrap="nowrap">
               {tMenu("refresh")}
               <Text size="xs" c="dimmed">
@@ -266,12 +267,16 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
 };
 
 const WidgetCacheAge = ({ queryClient, queryKey }: { queryClient: QueryClient; queryKey: unknown[] }) => {
+  const isFetching = useIsFetching({ queryKey }) > 0;
+  // ponytail: 1s tick for "just now" → "1s ago" transition; useIsFetching handles refetch reactivity
   const [, setTick] = useState(0);
   useEffect(() => {
     const id = setInterval(() => setTick((n) => n + 1), 1000);
     return () => clearInterval(id);
   }, []);
 
+  if (isFetching) return <Loader size={12} />;
+
   const timestamps = queryClient
     .getQueryCache()
     .findAll({ queryKey })