Add verifying state to hack action bar

src/components/Hack/HackActions.tsx

@@ -45,6 +45,7 @@ const HackActions: React.FC<HackActionsProps> = ({
   const [patchUrl, setPatchUrl] = React.useState<string | null>(null);
   const [termsAgreed, setTermsAgreed] = React.useState(false);
   const [romErrorModal, setRomErrorModal] = React.useState<BaseRomErrorModalState | null>(null);
+  const [isVerifyingRom, setIsVerifyingRom] = React.useState(false);
   const baseRomName = React.useMemo(() => baseRoms.find(r => r.id === baseRomId)?.name || null, [baseRomId]);
   const effectivePlatform = React.useMemo(
     () => platform ?? baseRoms.find(r => r.id === baseRomId)?.platform,
@@ -142,39 +143,44 @@ const HackActions: React.FC<HackActionsProps> = ({
       return;
     }
 
-    const selectedHash = await sha1Hex(f);
-    const match = baseRoms.find((r) => r.sha1.toLowerCase() === selectedHash.toLowerCase());
-    const requiredHash = baseRoms.find((r) => r.id === baseRomId)?.sha1.toLowerCase() ?? "";
+    setIsVerifyingRom(true);
+    try {
+      const selectedHash = await sha1Hex(f);
+      const match = baseRoms.find((r) => r.sha1.toLowerCase() === selectedHash.toLowerCase());
+      const requiredHash = baseRoms.find((r) => r.id === baseRomId)?.sha1.toLowerCase() ?? "";
 
-    if (!match) {
-      setRomErrorModal({
-        kind: "hash_mismatch",
-        fileName: f.name,
-        selectedHash,
-        requiredHash,
-        requiredRomName,
-      });
-      resetInput();
-      return;
-    }
+      if (!match) {
+        setRomErrorModal({
+          kind: "hash_mismatch",
+          fileName: f.name,
+          selectedHash,
+          requiredHash,
+          requiredRomName,
+        });
+        resetInput();
+        return;
+      }
+
+      if (match.id !== baseRomId) {
+        await importUploadedBlob(f);
+        setRomErrorModal({
+          kind: "hash_mismatch",
+          fileName: f.name,
+          selectedHash,
+          requiredHash,
+          requiredRomName,
+          matchedRomName: match.name,
+        });
+        resetInput();
+        return;
+      }
 
-    if (match.id !== baseRomId) {
       await importUploadedBlob(f);
-      setRomErrorModal({
-        kind: "hash_mismatch",
-        fileName: f.name,
-        selectedHash,
-        requiredHash,
-        requiredRomName,
-        matchedRomName: match.name,
-      });
-      resetInput();
-      return;
+      setFile(f);
+      setStatus("ready");
+    } finally {
+      setIsVerifyingRom(false);
     }
-
-    await importUploadedBlob(f);
-    setFile(f);
-    setStatus("ready");
   }
 
   async function onAgreeToTerms() {
@@ -324,6 +330,7 @@ const HackActions: React.FC<HackActionsProps> = ({
         supported={supported}
         onUploadChange={onSelectFile}
         termsAgreed={termsAgreed}
+        isVerifyingRom={isVerifyingRom}
       />
       {romErrorModal && (
         <BaseRomErrorModal

src/components/Hack/StickyActionBar.tsx

@@ -21,6 +21,7 @@ interface StickyActionBarProps {
   supported: boolean;
   onUploadChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   termsAgreed: boolean;
+  isVerifyingRom?: boolean;
 }
 
 export default function StickyActionBar({
@@ -39,6 +40,7 @@ export default function StickyActionBar({
   supported,
   onUploadChange,
   termsAgreed,
+  isVerifyingRom = false,
 }: StickyActionBarProps) {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
@@ -112,13 +114,23 @@ export default function StickyActionBar({
           )}
           {!romReady && !isLinked && (
             <label className="min-w-max inline-flex items-center gap-2 text-xs text-foreground/80">
-              <input ref={uploadInputRef} type="file" accept={platformAccept(baseRomPlatform)} onChange={onUploadChange} className="hidden" />
+              <input
+                ref={uploadInputRef}
+                type="file"
+                accept={platformAccept(baseRomPlatform)}
+                onChange={onUploadChange}
+                disabled={isVerifyingRom}
+                className="hidden"
+              />
               <button
                 type="button"
                 onClick={() => uploadInputRef.current?.click()}
+                disabled={isVerifyingRom}
                 className="shine-wrap btn-premium h-11 md:h-9 w-5/6 mx-auto md:w-auto md:mx-0 md:min-w-34 text-base md:text-sm font-semibold cursor-pointer disabled:cursor-not-allowed disabled:opacity-70"
               >
-                {baseRomName ? (
+                {isVerifyingRom ? (
+                  <span>Verifying…</span>
+                ) : baseRomName ? (
                   <span>Select <span className="font-bold">{baseRomName}</span> ROM</span>
                 ) : baseRomPlatform ? (
                   <span>Select <span className="font-bold">{baseRomPlatform}</span> ROM</span>