WhatsApp/Signal/Formstack/admin updates

packages/bridge-ui/components/QRCode.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from "react";
+// @ts-ignore - react-qr-code doesn't have React 19 compatible types yet
 import QRCodeInternal from "react-qr-code";
 import { Box } from "@mui/material";
 import { colors } from "../styles/theme";
@@ -28,22 +29,30 @@ export const QRCode: FC<QRCodeProps> = ({
 
   useEffect(() => {
     if (!verified && getValue && refreshInterval) {
-      const interval = setInterval(async () => {
+      // Fetch immediately on mount
+      const fetchQR = async () => {
         const { qr, kind } = await getValue(token);
-        console.log({ kind });
         setValue(qr);
         setKind(kind);
-      }, refreshInterval * 1000);
+      };
+      fetchQR();
+
+      // Then set up interval for refreshes
+      const interval = setInterval(fetchQR, refreshInterval * 1000);
       return () => clearInterval(interval);
     }
-  }, [getValue, refreshInterval]);
+  }, [getValue, refreshInterval, token, verified]);
 
   return !verified ? (
     <Box sx={{ backgroundColor: white, m: 2 }}>
-      {kind === "data" ? (
-        <QRCodeInternal value={value} />
+      {value ? (
+        kind === "data" ? (
+          <QRCodeInternal value={value} />
+        ) : (
+          <img src={value} alt={name} />
+        )
       ) : (
-        <img src={value} alt={name} />
+        <Box>Loading QR code...</Box>
       )}
       <Box>{helperText}</Box>
     </Box>