@iloveagents/foundry-web-ui 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @iloveagents/foundry-web-ui
 
+## 0.3.0
+
+### Patch Changes
+
+- @iloveagents/foundry-agent@0.3.0
+- @iloveagents/foundry-web-primitives@0.3.0
+
 ## 0.2.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
   "types": "./src/index.ts",
@@ -46,8 +46,8 @@
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
     "shiki": "^4.0.0",
-    "@iloveagents/foundry-agent": "0.2.2",
-    "@iloveagents/foundry-web-primitives": "0.2.2"
+    "@iloveagents/foundry-agent": "0.3.0",
+    "@iloveagents/foundry-web-primitives": "0.3.0"
   },
   "devDependencies": {
     "typescript": "~5.9.3",

package/src/components/sidebar.tsx

@@ -1407,6 +1407,7 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
   const toggle = useSidebarStore((s) => s.toggle);
   const handleNewConversation = useNewConversation();
   const rawNavConfig = useNavStore((s) => s.config);
+  const navLoading = useNavStore((s) => s.navLoading);
   // Sort by `priority` descending so feature hooks can declare slot
   // intent (e.g. "Recents above Tasks") instead of relying on the
   // order in which addGroup() happened to be called. Stable sort: ties
@@ -1420,6 +1421,12 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
         .map(({ g }) => g),
     [rawNavConfig],
   );
+  // Show skeleton rows during the cold nav fetch — but only until the
+  // integrator's primary dynamic group ("Workspaces") has been published.
+  // Once it exists, real rows render even if a later phase (status dots) is
+  // still resolving, so the skeleton never flashes over a populated tree.
+  const hasWorkspacesGroup = navConfig.some((group) => group.label === "Workspaces");
+  const showNavSkeleton = navLoading && !hasWorkspacesGroup;
   const currentPage = useAppStore((s) => s.currentPage);
   const navContext = useAppStore((s) => s.navContext);
 
@@ -1546,6 +1553,16 @@ function SidebarContent({ collapsed }: { collapsed: boolean }) {
         {navConfig.map((group) => (
           <NavGroupSection key={group.label} group={group} />
         ))}
+        {showNavSkeleton && (
+          <div className="space-y-1 px-1 pt-2" aria-hidden="true">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div
+                key={index}
+                className="h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40"
+              />
+            ))}
+          </div>
+        )}
       </nav>
 
       {/* Footer actions — registered by feature modules */}

package/src/lib/nav-store.ts

@@ -24,8 +24,18 @@ export interface NavFooterAction {
 interface NavStoreState {
   config: NavGroup[];
   footerActions: NavFooterAction[];
+  /**
+   * True while an integrator's nav sync is loading its first batch of
+   * groups. Optional/defaulted (starts ``false``) so existing consumers
+   * that never set it are unaffected. The sidebar reads it to render
+   * skeleton rows instead of an empty list during the cold fetch —
+   * avoids the "empty sidebar for N seconds" gap on a slow nav sync.
+   */
+  navLoading: boolean;
   /** Replace the entire config */
   setConfig: (config: NavGroup[]) => void;
+  /** Toggle the cold-load skeleton state. */
+  setNavLoading: (loading: boolean) => void;
   /** Add a group (replaces existing group with the same label) */
   addGroup: (group: NavGroup) => void;
   /** Remove a group by label */
@@ -39,9 +49,12 @@ interface NavStoreState {
 export const useNavStore = create<NavStoreState>((set, get) => ({
   config: DEFAULT_NAV_CONFIG,
   footerActions: [],
+  navLoading: false,
 
   setConfig: (config) => set({ config }),
 
+  setNavLoading: (navLoading) => set({ navLoading }),
+
   addGroup: (group) => {
     const config = get().config;
     const idx = config.findIndex((g) => g.label === group.label);