pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-21 00:51:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Resolve UI jittering on initial load

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-10 15:04:04 +00:00
parent 88983dae3c
commit c4b3886ffc
3 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/moderation/ModerationQueue.tsx
View File

@@ -148,9 +148,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
// Enable transitions after initial render
useEffect(() => {
if (!loading && items.length > 0 && !hasRenderedOnce) {
// Delay to ensure DOM has painted
const timer = setTimeout(() => setHasRenderedOnce(true), 100);
return () => clearTimeout(timer);
// Use requestAnimationFrame to enable transitions AFTER first paint
requestAnimationFrame(() => {
requestAnimationFrame(() => {
setHasRenderedOnce(true);
});
});
}
}, [loading, items.length, hasRenderedOnce]);
@@ -1695,7 +1698,11 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
}
return (
<div className="space-y-6">
<div
className="flex flex-col gap-6"
data-initial-load={!hasRenderedOnce ? "true" : "false"}
style={{ willChange: 'transform' }}
>
{items.map((item) => (
<QueueItem
key={item.id}