frontend: make qrscanner more resilient to re-render

I.e. when resizing the window or rotating the screen it sometimes
crashed.

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Label UTXOs that were created as change, as such, in coin control
 - Remove support for deprecated the Ethereum Goerli network
 - Revamp transaction history in account overview to improve legibility
+- Fix qrscanner when rotating the device or resizing the window
 
 # 4.45.0
 - Bundle BitBox02 firmware version v9.21.0

frontends/web/src/hooks/qrcodescanner.ts

@@ -66,14 +66,22 @@ export const useQRScanner = (
         }
       );
     }
-  });
+    return () => {
+      scanner.current?.stop();
+      scanner.current?.destroy();
+      scanner.current = null;
+    };
+  }, [onError, onResult, videoRef]);
 
   useEffect(() => {
     (async () => {
       try {
-        await scanner.current?.start();
-        if (onStart) {
-          onStart();
+        await new Promise(r => setTimeout(r, 300));
+        if (scanner.current) {
+          await scanner.current.start();
+          if (onStart) {
+            onStart();
+          }
         }
       } catch (error: any) {
         const stringifiedError = error.toString();
@@ -83,13 +91,5 @@ export const useQRScanner = (
     })();
   }, [videoRef, onStart, onResult, onError, t]);
 
-  useEffect(() => {
-    return () => {
-      scanner.current?.stop();
-      scanner.current?.destroy();
-      scanner.current = null;
-    };
-  });
-
   return { initErrorMessage };
 };