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:
Jason
2025-10-17 21:51:37 +08:00
parent 2d3d717826
commit f5c6363dee
2 changed files with 3 additions and 2 deletions

View File

@@ -145,7 +145,7 @@ function App() {
</div> </div>
</header> </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"> <div className="mx-auto max-w-4xl px-6 py-6">
<ProviderList <ProviderList
providers={providers} providers={providers}

View File

@@ -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 { providersApi, settingsApi, usageApi, type AppType } from "@/lib/api";
import type { Provider, Settings, UsageResult } from "@/types"; import type { Provider, Settings, UsageResult } from "@/types";
@@ -35,6 +35,7 @@ export const useProvidersQuery = (
): UseQueryResult<ProvidersQueryData> => { ): UseQueryResult<ProvidersQueryData> => {
return useQuery({ return useQuery({
queryKey: ["providers", appType], queryKey: ["providers", appType],
placeholderData: keepPreviousData,
queryFn: async () => { queryFn: async () => {
let providers: Record<string, Provider> = {}; let providers: Record<string, Provider> = {};
let currentProviderId = ""; let currentProviderId = "";