Improve UX of finalazing step

src/lib/helpers/buildTimeout.ts

@@ -24,12 +24,30 @@ function isBuildTimedOut(createdAt: string, status: string, timeoutSeconds: numb
 export function getEffectiveBuildStatus(
     originalStatus: string,
     createdAt: string,
+    screenshots: Array<string | null | undefined>,
     consoleVariables: Models.ConsoleVariables | undefined
 ): string {
     const timeoutSeconds = getBuildTimeoutSeconds(consoleVariables);
     if (isBuildTimedOut(createdAt, originalStatus, timeoutSeconds)) {
         return 'failed';
     }
+
+    const isReady = originalStatus === 'ready';
+    let hasScreenshot = true;
+    if (screenshots.length === 0) {
+        hasScreenshot = false;
+    }
+    for (const screenshot of screenshots) {
+        if (!screenshot) {
+            hasScreenshot = false;
+            break;
+        }
+    }
+
+    if (isReady && !hasScreenshot) {
+        return 'finalizing';
+    }
+
     return originalStatus;
 }
 

src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte

@@ -39,7 +39,12 @@
     } = $props();
 
     let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
+        getEffectiveBuildStatus(
+            deployment.status,
+            deployment.$createdAt,
+            [deployment.screenshotLight, deployment.screenshotDark],
+            $regionalConsoleVariables
+        )
     );
     let totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
 </script>

src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte

@@ -44,6 +44,7 @@
         getEffectiveBuildStatus(
             data.deployment.status,
             data.deployment.$createdAt,
+            [data.deployment.screenshotLight, data.deployment.screenshotDark],
             $regionalConsoleVariables
         )
     );

src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte

@@ -97,6 +97,7 @@
             {@const effectiveStatus = getEffectiveBuildStatus(
                 deployment.status,
                 deployment.$createdAt,
+                [deployment.screenshotLight, deployment.screenshotDark],
                 $regionalConsoleVariables
             )}
             <Table.Row.Link

src/routes/(console)/project-[region]-[project]/sites/(components)/deploymentActionMenu.svelte

@@ -56,6 +56,7 @@
             {@const effectiveStatus = getEffectiveBuildStatus(
                 deployment.status,
                 deployment.$createdAt,
+                [deployment.screenshotLight, deployment.screenshotDark],
                 $regionalConsoleVariables
             )}
             {#if !inCard}

src/routes/(console)/project-[region]-[project]/sites/(components)/logs.svelte

@@ -6,6 +6,7 @@
             case 'ready':
                 return 'success';
             case 'building':
+            case 'finalizing':
                 return 'warning';
             case 'processing':
                 return undefined;
@@ -41,7 +42,12 @@
     } = $props();
 
     let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
+        getEffectiveBuildStatus(
+            deployment.status,
+            deployment.$createdAt,
+            [deployment.screenshotLight, deployment.screenshotDark],
+            $regionalConsoleVariables
+        )
     );
 
     function setCopy() {

src/routes/(console)/project-[region]-[project]/sites/(components)/logsTimer.svelte

@@ -10,12 +10,17 @@
     let { status, deployment }: { status: string; deployment: Models.Deployment } = $props();
 
     let effectiveStatus = $derived(
-        getEffectiveBuildStatus(status, deployment.$createdAt, $regionalConsoleVariables)
+        getEffectiveBuildStatus(
+            status,
+            deployment.$createdAt,
+            [deployment.screenshotLight, deployment.screenshotDark],
+            $regionalConsoleVariables
+        )
     );
 </script>
 
 <Layout.Stack direction="row" alignItems="center" inline>
-    {#if ['processing', 'building'].includes(effectiveStatus)}
+    {#if ['processing', 'building', 'finalizing'].includes(effectiveStatus)}
         <Typography.Code color="--fgcolor-neutral-secondary">
             <Layout.Stack direction="row" alignItems="center" inline>
                 <p use:timer={{ start: deployment.$createdAt }}></p>

src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte

@@ -43,7 +43,12 @@
     } = $props();
 
     let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
+        getEffectiveBuildStatus(
+            deployment.status,
+            deployment.$createdAt,
+            [deployment.screenshotLight, deployment.screenshotDark],
+            $regionalConsoleVariables
+        )
     );
     let show = $state(false);
 

src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte

@@ -16,6 +16,7 @@
     let { data } = $props();
 
     let deployment = $state(data.deployment);
+    let skipScreenshotInterval = $state(null);
 
     onMount(() => {
         return realtime.forConsole(page.params.region, 'console', async (response) => {
@@ -26,24 +27,35 @@
             ) {
                 deployment = response.payload as Models.Deployment;
 
-                const isReady =
-                    deployment.status === 'ready' &&
-                    deployment.screenshotLight &&
-                    deployment.screenshotDark;
+                const isReady = deployment.status === 'ready';
 
-                if (isReady) {
-                    const resolvedUrl = resolve(
-                        '/(console)/project-[region]-[project]/sites/create-site/finish',
-                        {
-                            region: page.params.region,
-                            project: page.params.project
-                        }
-                    );
-                    await goto(`${resolvedUrl}?site=${data.site.$id}`);
+                const isFinished =
+                    isReady && deployment.screenshotLight && deployment.screenshotDark;
+
+                // Fallback mechanism
+                // If ready but not finished for over 30 seconds, go anyway
+                if (isReady && isFinished) {
+                    clearInterval(skipScreenshotInterval);
+                    goToFinishScreen();
+                } else if (isReady) {
+                    skipScreenshotInterval = setInterval(async () => {
+                        goToFinishScreen();
+                    }, 30000);
                 }
             }
         });
     });
+
+    async function goToFinishScreen() {
+        const resolvedUrl = resolve(
+            '/(console)/project-[region]-[project]/sites/create-site/finish',
+            {
+                region: page.params.region,
+                project: page.params.project
+            }
+        );
+        await goto(`${resolvedUrl}?site=${data.site.$id}`);
+    }
 </script>
 
 <Wizard
@@ -83,7 +95,7 @@
     </svelte:fragment>
     <svelte:fragment slot="footer">
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            {#if ['processing', 'building'].includes(data.deployment.status)}
+            {#if ['processing', 'building', 'finalizing'].includes(data.deployment.status)}
                 <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                     Deployment will continue in the background
                 </Typography.Text>

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte

@@ -27,7 +27,12 @@
 
     let deployment = $derived(data.deployment);
     let effectiveStatus = $derived(
-        getEffectiveBuildStatus(deployment.status, deployment.$createdAt, $regionalConsoleVariables)
+        getEffectiveBuildStatus(
+            deployment.status,
+            deployment.$createdAt,
+            [deployment.screenshotLight, deployment.screenshotDark],
+            $regionalConsoleVariables
+        )
     );
 
     let showRedeploy = $state(false);

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/table.svelte

@@ -84,6 +84,7 @@
             {@const effectiveStatus = getEffectiveBuildStatus(
                 deployment.status,
                 deployment.$createdAt,
+                [deployment.screenshotLight, deployment.screenshotDark],
                 $regionalConsoleVariables
             )}
             <Table.Row.Link

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deploymentsOverview.svelte

@@ -77,6 +77,7 @@
                         {@const effectiveStatus = getEffectiveBuildStatus(
                             status,
                             deployment.$createdAt,
+                            [deployment.screenshotLight, deployment.screenshotDark],
                             $regionalConsoleVariables
                         )}
                         {#if activeDeployment?.$id === deployment?.$id}