From f5c6363deeaa6850725e1d2cbc76146466f865a4 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 17 Oct 2025 21:51:37 +0800
Subject: [PATCH] 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
---
 src/App.tsx              | 2 +-
 src/lib/query/queries.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0188a09..f475cf5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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}
diff --git a/src/lib/query/queries.ts b/src/lib/query/queries.ts
index 05ba637..733a8ba 100644
--- a/src/lib/query/queries.ts
+++ b/src/lib/query/queries.ts
@@ -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 = "";