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>
|
</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}
|
||||||
|
|||||||
@@ -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 = "";
|
||||||
|
|||||||
Reference in New Issue
Block a user