diff --git a/video-gen-app/src/pages/GeneratedRecord.tsx b/video-gen-app/src/pages/GeneratedRecord.tsx
index 4187eb69..0d2aa49f 100644
--- a/video-gen-app/src/pages/GeneratedRecord.tsx
+++ b/video-gen-app/src/pages/GeneratedRecord.tsx
@@ -21,7 +21,32 @@ import { gethistory, gethistoryItems, getOAuthList, asyncBatchUploadMaterial, up
 const { Search } = Input;
 const { Text } = Typography;
 
+const usePageAllLoaded = (callback: () => void) => {
+    const executedRef = React.useRef(false);
+    useEffect(() => {
+        if (executedRef.current) return;
+        const handleLoad = () => {
+            if (executedRef.current) return;
+            executedRef.current = true;
+            callback?.();
+        };
+        if (document.readyState === 'complete') {
+            handleLoad();
+        } else {
+            window.addEventListener('load', handleLoad);
+        }
+        return () => {
+            window.removeEventListener('load', handleLoad);
+        };
+    }, [callback]);
+};
+
 const GeneratedRecord: React.FC = () => {
+    const [isPageLoaded, setIsPageLoaded] = useState(false);
+    usePageAllLoaded(() => {
+        setIsPageLoaded(true);
+    });
+
     const [filterType, setFilterType] = useState<'project' | 'creation' | 'hot_opening_replicate' | 'shot_replicate'>('project');
     const [filterMedia, setFilterMedia] = useState<'video' | 'image'>('video');
     const [recordlist, setRecordList] = useState<any[]>([]);
@@ -745,16 +770,8 @@ const GeneratedRecord: React.FC = () => {
             if (historySource) {
                 parameters = `${selectedDate}?gen_type=${filterMedia}&history_source=${historySource}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
             }
-            gethistoryItems(parameters).then(async (res: any) => {
+            gethistoryItems(parameters).then((res: any) => {
                 const data = Array.isArray(res) ? res : (res?.items || []);
-                for (const item of data) {
-                    if (item.videoUrl && item.videoUrl.trim()) {
-                        const dimensions = await getVideoDimensions(item.videoUrl);
-                        if (dimensions) {
-                            item.imagePx = dimensions;
-                        }
-                    }
-                }
                 let recordList = [{
                     generatedDate: res.generatedDate,
                     items: data,
@@ -766,6 +783,21 @@ const GeneratedRecord: React.FC = () => {
                 } else {
                     setRecordList([]);
                 }
+                if (isPageLoaded) {
+                    data.forEach(async (item: any) => {
+                        if (item.videoUrl && item.videoUrl.trim()) {
+                            const dimensions = await getVideoDimensions(item.videoUrl);
+                            if (dimensions) {
+                                setRecordList(prev => prev.map(group => ({
+                                    ...group,
+                                    items: group.items.map((i: any) =>
+                                        i.id === item.id ? { ...i, imagePx: dimensions } : i
+                                    ),
+                                })));
+                            }
+                        }
+                    });
+                }
             }).catch((err) => {
             }).finally(() => {
                 setLoading(false);
@@ -775,26 +807,34 @@ const GeneratedRecord: React.FC = () => {
             } finally {
             }
         } else {
-            gethistory(parameters).then(async (res: any) => {
+            gethistory(parameters).then((res: any) => {
                 const data = Array.isArray(res) ? res : (res?.groups || []);
-                for (const group of data) {
+                data.forEach(group => {
                     group.page = 1;
-                    for (const item of group.items) {
-                        if (item.videoUrl && item.videoUrl.trim()) {
-                            const dimensions = await getVideoDimensions(item.videoUrl);
-                            if (dimensions) {
-                                console.log(dimensions);
-                                item.imagePx = dimensions;
-                            }
-                        }
-                    }
-                }
+                });
                 if (Pagebreak.page === 1) {
                     setRecordList(data);
                 } else {
                     setRecordList(prev => [...prev, ...data]);
                 }
                 setTotalnumber(res?.totalDays || 0);
+                if (isPageLoaded) {
+                    data.forEach(group => {
+                        group.items.forEach(async (item: any) => {
+                            if (item.videoUrl && item.videoUrl.trim()) {
+                                const dimensions = await getVideoDimensions(item.videoUrl);
+                                if (dimensions) {
+                                    setRecordList(prev => prev.map(g => ({
+                                        ...g,
+                                        items: g.items.map((i: any) =>
+                                            i.id === item.id ? { ...i, imagePx: dimensions } : i
+                                        ),
+                                    })));
+                                }
+                            }
+                        });
+                    });
+                }
             }).catch((err) => {
                 if (Pagebreak.page === 1) {
                     setRecordList([]);