From 520a26923ef490ff321522d49d5ba83a7261c3c4 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Fri, 15 Jul 2022 12:11:11 +0200
Subject: [PATCH] Reduce live preview flicker. Make the preview the first item

---
 .../report-window/screenshot-generator.tsx    | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/components/report-window/screenshot-generator.tsx b/components/report-window/screenshot-generator.tsx
index 8c74944..d4a0c51 100644
--- a/components/report-window/screenshot-generator.tsx
+++ b/components/report-window/screenshot-generator.tsx
@@ -73,15 +73,19 @@ export default function ScreenshotGenerator({
     const [output, setOutput] = React.useState<any>({});
     const [currentAction, setCurrentAction] = React.useState<string>('');
     const [preview, setPreview] = React.useState<string>('');
+    const [lastPreview, setLastPreview] = React.useState<string>('');
 
     async function subscribeTask(path: string): Promise<screenshotTask> {
         let response = { status: taskState.WAITING };
+        let last_preview = '';
         while (response.status === taskState.WAITING || response.status === taskState.RUNNING) {
             await new Promise((resolve) => setTimeout(resolve, 1000));
             response = await (await pollTask(path)).json();
             setImages((response as screenshotTask)?.images);
             setCurrentAction((response as screenshotTask)?.current_action);
+            setLastPreview(last_preview);
             setPreview((response as screenshotTask)?.preview);
+            last_preview = (response as screenshotTask)?.preview;
             document.querySelector('.images')?.scrollTo({
                 top: document.querySelector('.images')?.scrollHeight,
                 behavior: 'smooth',
@@ -158,6 +162,7 @@ export default function ScreenshotGenerator({
                                 setTaskId(urlArr[urlArr.length - 1]);
                                 const response = await subscribeTask(task.url);
                                 setImages(response.images);
+                                setLastPreview(preview);
                                 setPreview(response.preview);
                                 setOutput(response);
                                 setRequestPath(response.zip_url);
@@ -191,6 +196,22 @@ export default function ScreenshotGenerator({
                         ) : null}
 
                         <div className="images">
+                            {mode === 'in_progress' ? (
+                                <div
+                                    className="browser"
+                                    style={{
+                                        backgroundImage: `url(${SS_URL}${preview})${
+                                            lastPreview ? `, url(${SS_URL}${lastPreview})` : ''
+                                        }`,
+                                    }}
+                                >
+                                    <div className="browser__header browser__header--in_progress">
+                                        <div className="browser__header--address-bar"></div>
+                                        <div className="browser__header--controls">· · ·</div>
+                                    </div>
+                                    <div className="browser__content"></div>
+                                </div>
+                            ) : null}
                             {images.map((screenshot) => {
                                 return (
                                     <div
@@ -210,21 +231,6 @@ export default function ScreenshotGenerator({
                                     </div>
                                 );
                             })}
-
-                            {mode === 'in_progress' ? (
-                                <div
-                                    className="browser"
-                                    style={{
-                                        backgroundImage: `url(${SS_URL}${preview})`,
-                                    }}
-                                >
-                                    <div className="browser__header browser__header--in_progress">
-                                        <div className="browser__header--address-bar"></div>
-                                        <div className="browser__header--controls">· · ·</div>
-                                    </div>
-                                    <div className="browser__content"></div>
-                                </div>
-                            ) : null}
                         </div>
                     </div>
                     <div className="buttons-container">