fix: eliminate layout shift when switching between Claude and Codex
Fixed dual-source jitter issue: 1. Horizontal shift: Use overflow-y-scroll to force scrollbar gutter 2. Vertical jump: Use keepPreviousData to maintain content during app switch
This commit is contained in:
@@ -145,7 +145,7 @@ function App() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<main className="flex-1 overflow-y-scroll">
|
||||
<div className="mx-auto max-w-4xl px-6 py-6">
|
||||
<ProviderList
|
||||
providers={providers}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery, type UseQueryResult } from "@tanstack/react-query";
|
||||
import { useQuery, type UseQueryResult, keepPreviousData } from "@tanstack/react-query";
|
||||
import { providersApi, settingsApi, usageApi, type AppType } from "@/lib/api";
|
||||
import type { Provider, Settings, UsageResult } from "@/types";
|
||||
|
||||
@@ -35,6 +35,7 @@ export const useProvidersQuery = (
|
||||
): UseQueryResult<ProvidersQueryData> => {
|
||||
return useQuery({
|
||||
queryKey: ["providers", appType],
|
||||
placeholderData: keepPreviousData,
|
||||
queryFn: async () => {
|
||||
let providers: Record<string, Provider> = {};
|
||||
let currentProviderId = "";
|
||||
|
||||
Reference in New Issue
Block a user