fix(sdk): unread notification count uses a placeholder, not initialData

apps/web/src/app/decks/_components/deck-toolbar/deck-toolbar-base-actions.tsx

@@ -21,7 +21,7 @@ export const DeckToolbarBaseActions = ({ setShowPurchaseDialog }: Props) => {
   const { activeUser } = useActiveAccount();
   const toggleUIProp = useGlobalStore((s) => s.toggleUiProp);
 
-  const { data: unread } = useQuery(
+  const { data: unread = 0 } = useQuery(
     getNotificationsUnreadCountQueryOptions(
       activeUser?.username,
       getAccessToken(activeUser?.username ?? "")

apps/web/src/features/shared/navbar/navbar-notifications-button.tsx

@@ -18,28 +18,31 @@ export function NavbarNotificationsButton({ onClick }: { onClick?: () => void })
   const toggleUiProp = useGlobalStore((state) => state.toggleUiProp);
   const globalNotifications = useGlobalStore((state) => state.globalNotifications);
 
-  const { data: unread } = useQuery(
+  const { data, isPlaceholderData } = useQuery(
     getNotificationsUnreadCountQueryOptions(
       activeUser?.username,
       getAccessToken(activeUser?.username ?? "")
     )
   );
+  const unread = data ?? 0;
 
   const [ringing, setRinging] = useState(false);
   // Ref guard: remembers the first unread count seen after mount so the bell
   // only rings when the count INCREASES while the page is open, never on load.
   const prevUnreadRef = useRef<number | undefined>(undefined);
 
   useEffect(() => {
-    if (typeof unread !== "number") {
+    // Only counts from the server: the 0 shown while the first request runs is not a
+    // reading, and recording it would ring the bell as soon as the real count arrives.
+    if (isPlaceholderData || typeof data !== "number") {
       return;
     }
     const prev = prevUnreadRef.current;
-    prevUnreadRef.current = unread;
-    if (prev !== undefined && unread > prev) {
+    prevUnreadRef.current = data;
+    if (prev !== undefined && data > prev) {
       setRinging(true);
     }
-  }, [unread]);
+  }, [data, isPlaceholderData]);
 
   return (
     <EcencyConfigManager.Conditional

apps/web/src/specs/features/shared/navbar-notifications-button.spec.tsx

@@ -0,0 +1,79 @@
+import { vi } from "vitest";
+import React from "react";
+import { act, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { renderWithQueryClient } from "@/specs/test-utils";
+
+// The unread count options as the SDK ships them after vision-web#1851: a placeholder 0
+// while loading, then the server's count. Mocked here because web specs load the
+// committed SDK build; the SDK's own spec covers the options themselves.
+const unread = vi.hoisted(() => ({ fetch: vi.fn<() => Promise<number>>() }));
+vi.mock("@ecency/sdk", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@ecency/sdk")>()),
+  getNotificationsUnreadCountQueryOptions: (username?: string) => ({
+    queryKey: ["notifications", "unread", username],
+    queryFn: () => unread.fetch(),
+    placeholderData: 0
+  })
+}));
+vi.mock("@/core/hooks", () => ({
+  useActiveAccount: () => ({ activeUser: { username: "tester" } })
+}));
+
+import { NavbarNotificationsButton } from "@/features/shared/navbar/navbar-notifications-button";
+
+const UNREAD_KEY = ["notifications", "unread", "tester"];
+
+function deferred<T>() {
+  let resolve: (value: T) => void = () => undefined;
+  const promise = new Promise<T>((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
+
+const bell = (name: string) => screen.getByRole("button", { name });
+const isRinging = (button: HTMLElement) => button.querySelector(".animate-bell-ring") !== null;
+
+describe("NavbarNotificationsButton", () => {
+  beforeEach(() => {
+    unread.fetch.mockReset();
+  });
+
+  it("does not ring for the count loaded with the page", async () => {
+    const first = deferred<number>();
+    unread.fetch.mockReturnValue(first.promise);
+
+    renderWithQueryClient(<NavbarNotificationsButton />);
+    // The placeholder 0 is on screen while the request runs: no badge.
+    expect(bell("user-nav.notifications")).toBeInTheDocument();
+
+    await act(async () => first.resolve(5));
+
+    const button = await waitFor(() => bell("user-nav.notifications-unread"));
+    expect(screen.getByText("5")).toBeInTheDocument();
+    expect(isRinging(button)).toBe(false);
+  });
+
+  it("rings when the count rises while the page is open", async () => {
+    unread.fetch.mockResolvedValue(5);
+    const { queryClient } = renderWithQueryClient(<NavbarNotificationsButton />);
+    const button = await waitFor(() => bell("user-nav.notifications-unread"));
+    expect(isRinging(button)).toBe(false);
+
+    act(() => {
+      queryClient.setQueryData(UNREAD_KEY, 6);
+    });
+
+    expect(await screen.findByText("6")).toBeInTheDocument();
+    expect(isRinging(bell("user-nav.notifications-unread"))).toBe(true);
+  });
+
+  it("shows no badge before the first count arrives", () => {
+    unread.fetch.mockReturnValue(deferred<number>().promise);
+    renderWithQueryClient(<NavbarNotificationsButton />);
+
+    expect(bell("user-nav.notifications")).toBeInTheDocument();
+    expect(screen.queryByText("0")).not.toBeInTheDocument();
+  });
+});

packages/sdk/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.4.11
+
+### Patch Changes
+
+- fix(sdk): unread notification count uses a placeholder, not initialData (#1852)
+
 ## 2.4.10
 
 ### Patch Changes

packages/sdk/dist/browser/index.d.ts

@@ -6848,9 +6848,8 @@ declare function getCommunityPermissions({ communityType, userRole, subscribed,
     isModerator: boolean;
 };
 
-declare function getNotificationsUnreadCountQueryOptions(activeUsername: string | undefined, code: string | undefined): Omit<_tanstack_react_query.UseQueryOptions<number, Error, number, (string | undefined)[]>, "queryFn"> & {
-    initialData: number | (() => number);
-    queryFn?: _tanstack_react_query.QueryFunction<number, (string | undefined)[]> | undefined;
+declare function getNotificationsUnreadCountQueryOptions(activeUsername: string | undefined, code: string | undefined): _tanstack_react_query.OmitKeyof<_tanstack_react_query.UseQueryOptions<number, Error, number, (string | undefined)[]>, "queryFn"> & {
+    queryFn?: _tanstack_react_query.QueryFunction<number, (string | undefined)[], never> | undefined;
 } & {
     queryKey: (string | undefined)[] & {
         [dataTagSymbol]: number;