Skip to content

Commit 937db1e

Browse files
Ekaterina BulatovaEkaterina Bulatova
Ekaterina Bulatova
authored and
Ekaterina Bulatova
committed
perf(webapp): SSR-window and virtualize the env vars table
The page server-rendered every row (~13 KB of markup each), producing a tens-of-MB HTML document and mounting thousands of row components on hydration, which froze the browser for projects with many variables across many environments. - Server-render only the first 50 rows, hydrate those, then switch to @tanstack/react-virtual over the full dataset after mount via useLayoutEffect (server and first client render match — no hydration mismatch). - Virtualize with a spacer-row technique inside the existing <table> so column widths and the sticky header are preserved; extract a shared EnvironmentVariableTableRow used by both the SSR and virtual paths to avoid drift. - Seed useFuzzyFilter from the URL `search` param (controlled mode, matching the Tasks page) so filtering happens at SSR and deep links render the correct rows in the initial window. For ~11k rows the document drops from ~150 MB to ~5 MB with 50 SSR rows; the load freeze is gone.
1 parent 311c6cc commit 937db1e

4 files changed

Lines changed: 706 additions & 180 deletions

File tree

‎apps/webapp/app/components/primitives/Table.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,13 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
130130
type TableBodyProps = {
131131
className?: string;
132132
children?: ReactNode;
133+
style?: React.CSSProperties;
133134
};
134135

135136
export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
136-
({ className, children }, ref) => {
137+
({ className, children, style }, ref) => {
137138
return (
138-
<tbody ref={ref} className={cn("relative overflow-y-auto", className)}>
139+
<tbody ref={ref} className={cn("relative overflow-y-auto", className)} style={style}>
139140
{children}
140141
</tbody>
141142
);

0 commit comments

Comments
 (0)