fix(sidebar): hold the rail flyout until its lists resolve for this workspace

Both the resource and folder queries keep the previous workspace's rows as
placeholder data across a switch. Gating only on isPending let the flyout
build a tree from one workspace's resources against another's folders, where
no folder id resolves — which the builder reads as "archived out from under
it" and files the whole list at the root.

Gate on isPlaceholderData too, matching foldersResolved in
use-folder-ancestors. An error settles a query without resolving it and is
deliberately not held: the flyout then renders flat, which still reaches
every row.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/rail-resource-flyout/rail-resource-flyout.test.tsx

@@ -0,0 +1,133 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockUseTablesList, mockUseFolders, mockUsePinnedIds } = vi.hoisted(() => ({
+  mockUseTablesList: vi.fn(),
+  mockUseFolders: vi.fn(),
+  mockUsePinnedIds: vi.fn(),
+}))
+
+vi.mock('next/link', () => ({
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+}))
+vi.mock('next/navigation', () => ({ useParams: () => ({ workspaceId: 'w1' }) }))
+vi.mock('@/hooks/queries/tables', () => ({ useTablesList: mockUseTablesList }))
+vi.mock('@/hooks/queries/folders', () => ({ useFolders: mockUseFolders }))
+vi.mock('@/hooks/queries/pinned-items', () => ({ usePinnedIds: mockUsePinnedIds }))
+vi.mock('@/hooks/queries/workspace-files', () => ({ useWorkspaceFiles: vi.fn() }))
+vi.mock('@/hooks/queries/workspace-file-folders', () => ({ useWorkspaceFileFolders: vi.fn() }))
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@sim/emcn'
+import { TablesRailFlyout } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/rail-resource-flyout'
+
+type QueryStub = { data?: unknown; isPending: boolean; isPlaceholderData: boolean }
+
+const resolved = (data: unknown): QueryStub => ({
+  data,
+  isPending: false,
+  isPlaceholderData: false,
+})
+const placeholder = (data: unknown): QueryStub => ({
+  data,
+  isPending: false,
+  isPlaceholderData: true,
+})
+
+const TABLE = {
+  id: 't1',
+  name: 'Leads',
+  folderId: 'f1',
+  updatedAt: new Date('2026-01-01'),
+}
+const FOLDER = { id: 'f1', name: 'Sales', parentId: null, updatedAt: new Date('2026-01-01') }
+
+describe('TablesRailFlyout', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    )
+    mockUsePinnedIds.mockReturnValue(new Set<string>())
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+    vi.clearAllMocks()
+    vi.unstubAllGlobals()
+  })
+
+  function render() {
+    act(() => {
+      root.render(
+        <DropdownMenu open modal={false}>
+          <DropdownMenuTrigger asChild>
+            <button type='button'>rail</button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <TablesRailFlyout workspaceId='w1' />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    })
+    return document.body.textContent ?? ''
+  }
+
+  it('nests a table under its folder once both lists have resolved', () => {
+    mockUseTablesList.mockReturnValue(resolved([TABLE]))
+    mockUseFolders.mockReturnValue(resolved([FOLDER]))
+
+    const text = render()
+
+    expect(text).toContain('Sales')
+    expect(text).not.toContain('Loading...')
+    /* The table sits inside the folder's submenu, which is closed until hovered. */
+    expect(document.querySelector('a[href="/workspace/w1/tables/t1"]')).toBeNull()
+  })
+
+  it('waits rather than filing tables at the root while the folders are the previous workspace’s', () => {
+    mockUseTablesList.mockReturnValue(resolved([TABLE]))
+    mockUseFolders.mockReturnValue(placeholder([]))
+
+    const text = render()
+
+    expect(text).toContain('Loading...')
+    expect(text).not.toContain('Leads')
+  })
+
+  it('waits while the tables themselves are still placeholder data', () => {
+    mockUseTablesList.mockReturnValue(placeholder([TABLE]))
+    mockUseFolders.mockReturnValue(resolved([FOLDER]))
+
+    expect(render()).toContain('Loading...')
+  })
+
+  it('still lists every table when the folder query failed outright', () => {
+    mockUseTablesList.mockReturnValue(resolved([TABLE]))
+    mockUseFolders.mockReturnValue({ data: undefined, isPending: false, isPlaceholderData: false })
+
+    const text = render()
+
+    expect(text).not.toContain('Loading...')
+    expect(document.querySelector('a[href="/workspace/w1/tables/t1"]')?.textContent).toContain(
+      'Leads'
+    )
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/rail-resource-flyout/rail-resource-flyout.tsx

@@ -26,14 +26,29 @@ import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 const TABLE_META = FOLDERED_RESOURCE_HEADERS.table
 const FILE_META = FOLDERED_RESOURCE_HEADERS.file
 
+/**
+ * A list is usable only once it has resolved for THIS workspace. Every list here keeps the
+ * previous workspace's rows as placeholder data across a switch, and a tree built from one
+ * workspace's resources against another's folders resolves no folder id at all — which the
+ * builder reads as "archived out from under it" and files the whole list at the root. So the
+ * rows wait for both queries rather than render a shape that is wrong and then jumps.
+ *
+ * `isPlaceholderData` is what separates that from a real result; a pending-only check is the
+ * exact gate `tables.tsx` warns against. An error settles a query without resolving it, and is
+ * deliberately not held here: the flyout then renders flat, which still reaches every row.
+ */
+function isResolving(query: { isPending: boolean; isPlaceholderData: boolean }): boolean {
+  return query.isPending || query.isPlaceholderData
+}
+
 export function TablesRailFlyout({ workspaceId }: { workspaceId: string }) {
   const params = useParams()
-  const { data: tables, isPending: isTablesPending } = useTablesList(workspaceId)
-  const { data: folders, isPending: isFoldersPending } = useFolders(workspaceId, {
-    resourceType: 'table',
-  })
+  const tablesQuery = useTablesList(workspaceId)
+  const foldersQuery = useFolders(workspaceId, { resourceType: 'table' })
   const pinnedTableIds = usePinnedIds(workspaceId, 'table')
   const pinnedFolderIds = usePinnedIds(workspaceId, 'folder')
+  const { data: tables } = tablesQuery
+  const { data: folders } = foldersQuery
 
   const entries = useMemo(
     () =>
@@ -52,18 +67,20 @@ export function TablesRailFlyout({ workspaceId }: { workspaceId: string }) {
       entries={entries}
       icon={TABLE_META.rootIcon}
       currentItemId={typeof params.tableId === 'string' ? params.tableId : undefined}
-      isLoading={isTablesPending || isFoldersPending}
+      isLoading={isResolving(tablesQuery) || isResolving(foldersQuery)}
       emptyLabel='No tables yet'
     />
   )
 }
 
 export function FilesRailFlyout({ workspaceId }: { workspaceId: string }) {
   const params = useParams()
-  const { data: files, isPending: isFilesPending } = useWorkspaceFiles(workspaceId)
-  const { data: folders, isPending: isFoldersPending } = useWorkspaceFileFolders(workspaceId)
+  const filesQuery = useWorkspaceFiles(workspaceId)
+  const foldersQuery = useWorkspaceFileFolders(workspaceId)
   const pinnedFileIds = usePinnedIds(workspaceId, 'file')
   const pinnedFolderIds = usePinnedIds(workspaceId, 'folder')
+  const { data: files } = filesQuery
+  const { data: folders } = foldersQuery
 
   const entries = useMemo(
     () =>
@@ -82,7 +99,7 @@ export function FilesRailFlyout({ workspaceId }: { workspaceId: string }) {
       entries={entries}
       icon={FILE_META.rootIcon}
       currentItemId={typeof params.fileId === 'string' ? params.fileId : undefined}
-      isLoading={isFilesPending || isFoldersPending}
+      isLoading={isResolving(filesQuery) || isResolving(foldersQuery)}
       emptyLabel='No files yet'
     />
   )