mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +03:00
Towards [FE-3428](https://linear.app/supabase/issue/FE-3428). ## Summary Cheap render-cost fixes so the Schema Visualizer stays responsive at 400+ tables. No data-layer or API changes — pure render-side work, isolated to the Schema Visualizer. - Enable `onlyRenderVisibleElements` on `<ReactFlow>` so xyflow skips mounting nodes and edges outside the viewport. - Memoize `TableNode` (custom comparator) and `DefaultEdge` so they don't re-render on unrelated state changes (pan/zoom, theme toggle, parent re-renders). - Drop `resolvedTheme` from the layout effect deps — theme is purely visual; toggling it no longer re-runs Dagre and replaces every node/edge. - `handleSelectionChange` now (a) skips `setEdges` entirely when no edge's `animated` flipped, and (b) preserves the object reference for untouched edges so memoized edges don't re-render. - Precompute a `Map<tableName, …>` lookup in `getGraphDataFromTables` so FK handle resolution is O(1) per relationship instead of scanning every table+column. A follow-up PR will add a `useInfiniteTablesQuery` and switch both the Schema Visualizer and Database > Tables list onto it for progressive loading and infinite scroll. ## Caveats - `TableNode` reads `selectedEdge` from context, so selecting an edge still re-renders all visible `TableNode`s via context propagation. The memo guards against props-driven re-renders (pan/zoom/theme). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Optimized database schema graph rendering with improved component caching and efficient relationship lookups. * Enhanced visual element rendering to reduce unnecessary re-renders for large schemas. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46235?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->