fix(tables): header "T…" flicker — emcn barrel Table component shadowed the Table icon in loading fallbacks

[waleedlatif1]

Summary

• Navigating to the Tables tab flashed a truncated "T…" with no icon before settling on "⊞ Tables". Root cause: the emcn root barrel explicitly re-exports the Table data-table component, which shadows the Table icon from export * from './icons' — so tables/loading.tsx and tables/[tableId]/loading.tsx were rendering an empty <table> (with a w-full wrapper) as the header icon, squeezing the "Tables" label to one clipped character for the duration of the route-transition fallback. Only visible in prod builds, where the prefetched loading shell actually displays.
• Import the icon from @/components/emcn/icons in both fallbacks (matching the live pages) and document the Table name collision in the barrel so it doesn’t recur.
• Align breadcrumb loading patterns across resource pages: the table editor now shows the same terminal … crumb as its loading.tsx while the table query resolves (previously an empty label with an orphaned chevron dropdown), and the files detail loading crumb uses … + terminal instead of a literal ....
• Remove the dead KnowledgeHeader component (only referenced by its barrel export).

Type of Change

• Bug fix

Testing

Reproduced and verified against a local production build with Playwright (throttled network, per-frame DOM sampling of the header): pre-fix the fallback renders an empty <table> + clipped label (matches the reported screenshot pixel-for-pixel); post-fix all frames render the svg icon with an unclipped label. Typecheck passes.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jun 12, 2026 8:49pm

[cursor]

PR Summary

Low Risk
UI-only fixes (imports, loading breadcrumbs) plus removal of dead knowledge header code; no auth, API, or data-path changes.

Overview
Fixes a Tables tab header flash where the label briefly showed as clipped "T…" during route transitions. The emcn root barrel’s explicit Table re-export pointed at the data-table component, not the icon, so table loading shells rendered an empty full-width <table> as the header glyph and squeezed the title.

Import changes: tables/loading.tsx and tables/[tableId]/loading.tsx now pull Table from @/components/emcn/icons, with a barrel comment warning future importers to do the same.

Breadcrumb loading UX: The table detail page shows a terminal … crumb while tableData is loading (matching its loading.tsx), avoiding an empty second crumb and stray chevron. Files file-detail loading breadcrumbs use … with terminal: true instead of ....

Cleanup: Removes unused KnowledgeHeader and its barrel export.

^{Reviewed by Cursor Bugbot for commit 7b44f9f. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes a visual flicker on the Tables tab header where a truncated "T…" appeared briefly during route transitions — caused by a naming collision in the emcn barrel where export * from './components' and export * from './icons' both exported a symbol named Table, causing the data-table HTML element to be used as an icon in the loading fallbacks.

• Core fix: An explicit named re-export of the data-table Table component is inserted between the two wildcards in emcn/index.ts to resolve the ES module ambiguity; both loading fallbacks are updated to import the icon from @/components/emcn/icons — a subpath pattern that is already widely established across 20+ files in the codebase.
• Breadcrumb UX polish: table.tsx now shows a { label: '…', terminal: true } crumb while tableData is loading (matching loading.tsx), eliminating the stale empty-label / orphaned-chevron state; files.tsx gets the same terminal: true treatment with a proper Unicode ellipsis.
• Cleanup: The entirely dead KnowledgeHeader component (only referenced by its own barrel export) is deleted, confirmed by a repo-wide search returning zero callers.

Confidence Score: 5/5

Safe to merge — the changes are narrowly scoped to fixing the icon import, aligning loading breadcrumbs, and removing a confirmed dead component.

The root cause (barrel collision between the data-table Table and the icon Table) is correctly identified and fixed via an explicit named re-export that ES modules prioritise over wildcards. Both loading fallbacks now import the icon from the same subpath already used by 20+ other files, so no new pattern is introduced. The breadcrumb change in table.tsx is logically sound — the disabled: !tableData guard is only removed in the branch where tableData is always truthy. The KnowledgeHeader deletion is safe (grep confirms zero callers). No edge cases or regressions were found.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/index.ts	Adds an explicit named re-export of the Table data-table component between the two wildcard exports to resolve the ES-module naming collision with the Table icon; order and resolution semantics are correct.
apps/sim/app/workspace/[workspaceId]/tables/loading.tsx	Splits the import so Table icon comes from the icons subpath (already a widely-used pattern) and data-table utilities remain from the barrel — directly fixes the reported flicker.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx	Same icon import fix as the parent loading file; now consistent with the live table editor page import.
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx	Breadcrumb memo is conditioned on tableData being defined; shows '…' terminal crumb while loading, matching loading.tsx; removal of disabled: !tableData is correct since the items only render when tableData is truthy.
apps/sim/app/workspace/[workspaceId]/files/files.tsx	Replaces ASCII '...' with Unicode '…' and adds terminal: true on the loading breadcrumb for consistency with other resource pages.
apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx	Deleted — confirmed to have zero callers across the repository; only its own barrel export referenced it.
apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts	KnowledgeHeader export removed from barrel, matching the file deletion; no other consumers need updating.

Sequence Diagram

sequenceDiagram
    participant Browser
    participant Next.js Router
    participant loading.tsx
    participant emcn/index.ts
    participant emcn/icons

    Note over Browser,emcn/icons: Before fix
    Browser->>Next.js Router: Navigate to /tables
    Next.js Router->>loading.tsx: Render loading fallback
    loading.tsx->>emcn/index.ts: "import { Table as TableIcon }"
    emcn/index.ts-->>loading.tsx: data-table element (collision!)
    loading.tsx-->>Browser: Renders empty table as icon → T… flicker

    Note over Browser,emcn/icons: After fix
    Browser->>Next.js Router: Navigate to /tables
    Next.js Router->>loading.tsx: Render loading fallback
    loading.tsx->>emcn/icons: "import { Table as TableIcon }"
    emcn/icons-->>loading.tsx: SVG icon glyph
    loading.tsx-->>Browser: Renders Tables header correctly

Loading

_{Reviews (1): Last reviewed commit: "fix(tables): header "T…" flicker — emcn ..." | Re-trigger Greptile}