Fix VNC connection

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -1,4 +1,3 @@
-import { CircularProgress } from "@mui/material";
 import React from "react";
 import { useParams } from "react-router-dom";
 import { VncScreen } from "react-vnc";
@@ -28,15 +27,15 @@ export function VNCRoute(): React.ReactElement {
 function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   const snackbar = useSnackbar();
 
+  const counter = React.useRef(false);
   const [url, setURL] = React.useState<string | undefined>();
-  const urlRef = React.useRef<string | undefined>();
 
   const load = async () => {
     try {
       const u = await VMApi.OneShotVNCURL(p.vm);
       console.info(u);
-      if (urlRef.current === undefined) {
-        urlRef.current = u;
+      if (counter.current === false) {
+        counter.current = true;
         setURL(u);
       }
     } catch (e) {
@@ -45,42 +44,35 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
     }
   };
 
-  React.useEffect(() => {
-    load();
-  });
-
-  if (urlRef.current === undefined)
-    return (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-        }}
-      >
-        <CircularProgress />
-      </div>
-    );
+  const reconnect = () => {
+    counter.current = false;
+    setURL(undefined);
+  };
 
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        height: "100%",
-      }}
-    >
-      <VncScreen
-        url={urlRef.current}
-        onDisconnect={() => {
-          console.info("VNC disconnected " + urlRef.current);
-          urlRef.current = undefined;
-          load();
-          setURL(undefined);
-        }}
-      />
-    </div>
+    <AsyncWidget
+      loadKey={counter.current}
+      load={load}
+      ready={url !== undefined && counter.current}
+      errMsg="Failed to get a token to initialize VNC connection!"
+      build={() => (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+          }}
+        >
+          <VncScreen
+            url={url!}
+            onDisconnect={() => {
+              console.info("VNC disconnected " + url);
+              reconnect();
+            }}
+          />
+        </div>
+      )}
+    />
   );
 }