pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-21 13:11: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 // Enable transitions after initial render
useEffect(() => { useEffect(() => {
if (!loading && items.length > 0 && !hasRenderedOnce) { if (!loading && items.length > 0 && !hasRenderedOnce) {
// Delay to ensure DOM has painted // Use requestAnimationFrame to enable transitions AFTER first paint
const timer = setTimeout(() => setHasRenderedOnce(true), 100); requestAnimationFrame(() => {
return () => clearTimeout(timer); requestAnimationFrame(() => {
setHasRenderedOnce(true);
});
});
} }
}, [loading, items.length, hasRenderedOnce]); }, [loading, items.length, hasRenderedOnce]);
@@ -1695,7 +1698,11 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
} }
return ( 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) => ( {items.map((item) => (
<QueueItem <QueueItem
key={item.id} key={item.id}

5
src/components/moderation/QueueItem.tsx
View File

@@ -108,7 +108,7 @@ export const QueueItem = memo(({
return ( return (
<Card <Card
key={item.id} key={item.id}
className={`border-l-4 ${!isInitialRender ? 'transition-opacity duration-200' : ''} ${ className={`border-l-4 ${
validationResult?.blockingErrors && validationResult.blockingErrors.length > 0 ? 'border-l-red-600' : validationResult?.blockingErrors && validationResult.blockingErrors.length > 0 ? 'border-l-red-600' :
item.status === 'flagged' ? 'border-l-red-500' : item.status === 'flagged' ? 'border-l-red-500' :
item.status === 'approved' ? 'border-l-green-500' : item.status === 'approved' ? 'border-l-green-500' :
@@ -118,7 +118,8 @@ export const QueueItem = memo(({
}`} }`}
style={{ style={{
opacity: actionLoading === item.id ? 0.5 : 1, opacity: actionLoading === item.id ? 0.5 : 1,
pointerEvents: actionLoading === item.id ? 'none' : 'auto' pointerEvents: actionLoading === item.id ? 'none' : 'auto',
transition: isInitialRender ? 'none' : 'opacity 200ms'
}} }}
> >
<CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}> <CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>

8
src/index.css
View File

@@ -120,6 +120,14 @@ All colors MUST be HSL.
} }
} }
/* Suppress ALL animations during initial queue render */
[data-initial-load="true"] * {
animation-duration: 0s !important;
animation-delay: 0s !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
/* Custom Uppy Photo Upload Styling */ /* Custom Uppy Photo Upload Styling */
@layer components { @layer components {
/* Uppy Dashboard customization to match theme */ /* Uppy Dashboard customization to match theme */