From 7b0551d66fad839d358ee7bf9cabbf71fdda642f Mon Sep 17 00:00:00 2001 From: Trent Rand Date: Sat, 13 Jul 2024 22:47:43 -0700 Subject: [PATCH] Optimize UX by removing fastboot initialization step This refactor eliminates the visible INITIALIZING to READY state transition, allowing users to interact with the page immediately after load. The manifest is now fetched silently in the background, typically taking only 10-30ms. If a user interacts before the fetch completes, the system waits for readiness before proceeding. These changes eliminate flashing that occurs on page load. --- src/app/App.jsx | 2 +- src/app/{Flash.jsx => Flash.client.jsx} | 41 ++++--- src/utils/fastboot.js | 149 ++++++++++++------------ 3 files changed, 99 insertions(+), 93 deletions(-) rename src/app/{Flash.jsx => Flash.client.jsx} (92%) diff --git a/src/app/App.jsx b/src/app/App.jsx index 8aceb77..f62c5e9 100644 --- a/src/app/App.jsx +++ b/src/app/App.jsx @@ -5,7 +5,7 @@ import fastbootPorts from '../assets/fastboot-ports.svg' import zadigCreateNewDevice from '../assets/zadig_create_new_device.png' import zadigForm from '../assets/zadig_form.png' -const Flash = lazy(() => import('./Flash')); +const Flash = lazy(() => import('./Flash.client')); export default function App() { const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev' diff --git a/src/app/Flash.jsx b/src/app/Flash.client.jsx similarity index 92% rename from src/app/Flash.jsx rename to src/app/Flash.client.jsx index d7c544d..614fa09 100644 --- a/src/app/Flash.jsx +++ b/src/app/Flash.client.jsx @@ -1,4 +1,6 @@ -import { useCallback } from 'react' +'use client'; + +import { useCallback, useEffect } from 'react' import { Step, Error, useFastboot } from '@/utils/fastboot' @@ -16,11 +18,6 @@ import systemUpdate from '@/assets/system_update_c3.svg' const steps = { - [Step.INITIALIZING]: { - status: 'Initializing...', - bgColor: 'bg-gray-400 dark:bg-gray-700', - icon: cloud, - }, [Step.READY]: { status: 'Ready', description: 'Tap the button above to begin', @@ -189,10 +186,6 @@ export default function Flash() { serial, } = useFastboot() - const handleContinue = useCallback(() => { - onContinue?.() - }, [onContinue]) - const handleRetry = useCallback(() => { onRetry?.() }, [onRetry]) @@ -214,18 +207,24 @@ export default function Flash() { } // warn the user if they try to leave the page while flashing - if (Step.DOWNLOADING <= step && step <= Step.ERASING) { - window.addEventListener("beforeunload", beforeUnloadListener, { capture: true }) - } else { - window.removeEventListener("beforeunload", beforeUnloadListener, { capture: true }) - } + useEffect(() => { + if (Step.DOWNLOADING <= step && step <= Step.ERASING) { + window.addEventListener("beforeunload", beforeUnloadListener, { capture: true }) + } else { + window.removeEventListener("beforeunload", beforeUnloadListener, { capture: true }) + } + + return () => { + window.removeEventListener("beforeunload", beforeUnloadListener, { capture: true }) + } + }, [step]) return (
- {title} - {description} + + {title} + + + {description} + {error && (