Noticeable lag when trying to open modal with search params?
In my current setup toggling a modal with search params has a very noticable lag. My page is very heavy thousands of objects but I still wonder what is going on in the background to cause a ~500ms lag.
Navigation:
function RouteComponent() {
const { user } = Route.useRouteContext();
const { orgId, teamId, sheetId } = Route.useParams();
const { settings } = Route.useSearch();
const operationsQuery = useSuspenseQuery(sheetOperationsOptions({ sheetId }));
const navigate = useNavigate();
return (
<Page className="max-w-none">
<SheetContext
initialState={{
sheetId: sheetId,
organizationId: orgId,
teamId: teamId,
userId: user.id,
}}
>
<>
<Dialog
open={!!settings}
onOpenChange={() =>
navigate({
from: "/dash/$orgId/$teamId/sheets/$sheetId",
search: (s) => ({ ...s, settings: null }),
})
}
>
<DialogContent className="md:max-w-4xl">
<SheetSettingsContent
organizationId={orgId}
userId={user.id}
sheetId={sheetId}
currentSchema={currentSchema}
activePage={settings || "sheet"}
onClose={() =>
navigate({
from: "/dash/$orgId/$teamId/sheets/$sheetId",
search: (s) => ({ ...s, settings: null }),
})
}
/>
</DialogContent>
</Dialog>
</>
</SheetContext>
</Page>
);
}
function RouteComponent() {
const { user } = Route.useRouteContext();
const { orgId, teamId, sheetId } = Route.useParams();
const { settings } = Route.useSearch();
const operationsQuery = useSuspenseQuery(sheetOperationsOptions({ sheetId }));
const navigate = useNavigate();
return (
<Page className="max-w-none">
<SheetContext
initialState={{
sheetId: sheetId,
organizationId: orgId,
teamId: teamId,
userId: user.id,
}}
>
<>
<Dialog
open={!!settings}
onOpenChange={() =>
navigate({
from: "/dash/$orgId/$teamId/sheets/$sheetId",
search: (s) => ({ ...s, settings: null }),
})
}
>
<DialogContent className="md:max-w-4xl">
<SheetSettingsContent
organizationId={orgId}
userId={user.id}
sheetId={sheetId}
currentSchema={currentSchema}
activePage={settings || "sheet"}
onClose={() =>
navigate({
from: "/dash/$orgId/$teamId/sheets/$sheetId",
search: (s) => ({ ...s, settings: null }),
})
}
/>
</DialogContent>
</Dialog>
</>
</SheetContext>
</Page>
);
}
<Link
from="/dash/$orgId/$teamId/sheets/$sheetId"
search={(s) => ({ ...s, settings: "history" })}
>
<Button variant="outline" size="sm" className="h-7">
<AppIcon.Timetravel className="size-3" />
</Button>
</Link>
<Link
from="/dash/$orgId/$teamId/sheets/$sheetId"
search={(s) => ({ ...s, settings: "history" })}
>
<Button variant="outline" size="sm" className="h-7">
<AppIcon.Timetravel className="size-3" />
</Button>
</Link>
1 Reply
extended-salmon•4w ago
are you rerendering everything?
look into fine grained selectors, maybe that helps to select just the state you need