fix(dashboard): stable sidebar nav hydration and Observability loading

- Defer flag-gated category rows until mount + use getFlag ready/on (match Sidebar)
- Add Observability block to loading home nav to avoid mount flicker when websites load

Author: izadoesdev

apps/dashboard/components/layout/category-sidebar.tsx

@@ -14,13 +14,15 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useHasMounted } from "@/hooks/use-has-mounted";
 import { useWebsitesLight } from "@/hooks/use-websites";
 import { cn } from "@/lib/utils";
 import { Button } from "../ui/button";
 import {
 	categoryConfig,
 	createLoadingWebsitesNavigation,
 	createWebsitesNavigation,
+	filterCategoriesByFlags,
 	filterCategoriesForRoute,
 	getContextConfig,
 	getDefaultCategory,
@@ -54,7 +56,8 @@ export function CategorySidebar({
 		enabled: user !== null,
 	});
 	const [helpOpen, setHelpOpen] = useState(false);
-	const { isOn } = useFlags();
+	const { getFlag } = useFlags();
+	const hasMounted = useHasMounted();
 	const openCommandSearchAction = useCommandSearchOpenAction();
 
 	const { categories, defaultCategory } = useMemo(() => {
@@ -73,18 +76,14 @@ export function CategorySidebar({
 				: baseConfig;
 
 		const defaultCat = getDefaultCategory(pathname);
-		const filteredCategories = filterCategoriesForRoute(
-			config.categories,
-			pathname
-		).filter((category) => {
-			if (category.flag && !isOn(category.flag)) {
-				return false;
-			}
-			return true;
-		});
+		const filteredCategories = filterCategoriesByFlags(
+			filterCategoriesForRoute(config.categories, pathname),
+			hasMounted,
+			getFlag
+		);
 
 		return { categories: filteredCategories, defaultCategory: defaultCat };
-	}, [pathname, websites, isLoadingWebsites, isOn]);
+	}, [pathname, websites, isLoadingWebsites, hasMounted, getFlag]);
 
 	const activeCategory = selectedCategory || defaultCategory;
 

apps/dashboard/components/layout/mobile-sidebar.tsx

@@ -22,13 +22,15 @@ import { useCommandSearchOpenAction } from "@/components/ui/command-search";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import type { useAccordionStates } from "@/hooks/use-persistent-state";
+import { useHasMounted } from "@/hooks/use-has-mounted";
 import { useWebsitesLight } from "@/hooks/use-websites";
 import { cn } from "@/lib/utils";
 import { Branding } from "./logo";
 import {
 	categoryConfig,
 	createLoadingWebsitesNavigation,
 	createWebsitesNavigation,
+	filterCategoriesByFlags,
 	filterCategoriesForRoute,
 	getContextConfig,
 	getDefaultCategory,
@@ -117,7 +119,8 @@ export function MobileSidebar({
 	const pathname = usePathname();
 	const router = useRouter();
 	const openCommandSearchAction = useCommandSearchOpenAction();
-	const { isOn } = useFlags();
+	const { getFlag } = useFlags();
+	const hasMounted = useHasMounted();
 
 	const { websites, isLoading: isLoadingWebsites } = useWebsitesLight({
 		enabled: user !== null,
@@ -142,15 +145,12 @@ export function MobileSidebar({
 					}
 				: baseConfig;
 
-		return filterCategoriesForRoute(config.categories, pathname).filter(
-			(category) => {
-				if (category.flag) {
-					return isOn(category.flag);
-				}
-				return true;
-			}
+		return filterCategoriesByFlags(
+			filterCategoriesForRoute(config.categories, pathname),
+			hasMounted,
+			getFlag
 		);
-	}, [pathname, websites, isLoadingWebsites, isOn]);
+	}, [pathname, websites, isLoadingWebsites, hasMounted, getFlag]);
 
 	const defaultCategory = useMemo(
 		() => getDefaultCategory(pathname),

apps/dashboard/components/layout/navigation/mobile-category-selector.tsx

@@ -5,6 +5,7 @@ import { useFlags } from "@databuddy/sdk/react";
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { usePathname } from "next/navigation";
 import { useMemo } from "react";
+import { useHasMounted } from "@/hooks/use-has-mounted";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -18,6 +19,7 @@ import {
 	categoryConfig,
 	createLoadingWebsitesNavigation,
 	createWebsitesNavigation,
+	filterCategoriesByFlags,
 	filterCategoriesForRoute,
 	getContextConfig,
 	getDefaultCategory,
@@ -39,7 +41,8 @@ export function MobileCategorySelector({
 	const { websites, isLoading: isLoadingWebsites } = useWebsitesLight({
 		enabled: user !== null,
 	});
-	const { isOn } = useFlags();
+	const { getFlag } = useFlags();
+	const hasMounted = useHasMounted();
 
 	const { categories, defaultCategory } = useMemo(() => {
 		const baseConfig = getContextConfig(pathname);
@@ -57,19 +60,14 @@ export function MobileCategorySelector({
 				: baseConfig;
 
 		const defaultCat = getDefaultCategory(pathname);
-		const filteredCategories = filterCategoriesForRoute(
-			config.categories,
-			pathname
-		).filter((category) => {
-			if (category.flag) {
-				const flagState = isOn(category.flag);
-				return flagState;
-			}
-			return true;
-		});
+		const filteredCategories = filterCategoriesByFlags(
+			filterCategoriesForRoute(config.categories, pathname),
+			hasMounted,
+			getFlag
+		);
 
 		return { categories: filteredCategories, defaultCategory: defaultCat };
-	}, [pathname, websites, isLoadingWebsites, isOn]);
+	}, [pathname, websites, isLoadingWebsites, hasMounted, getFlag]);
 
 	const activeCategory = selectedCategory || defaultCategory;
 	const currentCategory = categories.find((cat) => cat.id === activeCategory);

apps/dashboard/components/layout/navigation/navigation-config.tsx

@@ -79,6 +79,28 @@ export const filterCategoriesForRoute = (
 	return categories.filter((category) => !(category.hideFromDemo && isDemo));
 };
 
+/**
+ * Hides flag-gated categories until the client has mounted, then applies the same
+ * rule as main navigation: only show when the flag is ready and on. Prevents
+ * hydration mismatches from `isOn` / flag store differing between SSR and first paint.
+ */
+export function filterCategoriesByFlags(
+	categories: Category[],
+	hasMounted: boolean,
+	getFlag: (key: string) => { status: string; on: boolean }
+): Category[] {
+	return categories.filter((category) => {
+		if (!category.flag) {
+			return true;
+		}
+		if (!hasMounted) {
+			return false;
+		}
+		const flagState = getFlag(category.flag);
+		return flagState.status === "ready" && flagState.on;
+	});
+}
+
 const createDynamicNavigation = <T extends { id: string; name: string | null }>(
 	items: T[],
 	title: string,
@@ -480,4 +502,12 @@ export const createLoadingWebsitesNavigation = (): NavigationEntry[] => [
 		"Loading websites...",
 		GlobeIcon
 	),
+	createNavSection("Observability", ActivityIcon, [
+		createNavItem("Links", LinkIcon, "/links", {
+			highlight: true,
+		}),
+		createNavItem("Custom Events", LightningIcon, "/events", {
+			highlight: true,
+		}),
+	]),
 ];

apps/dashboard/hooks/use-has-mounted.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+
+/** True after the first client commit. Use to avoid SSR / hydration mismatches for client-only state. */
+export function useHasMounted(): boolean {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	return mounted;
+}