Attempt to fix connection

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -29,12 +29,16 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   const snackbar = useSnackbar();
 
   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;
         setURL(u);
+      }
     } catch (e) {
       console.error(e);
       snackbar("Failed to initialize VNC connection!");
@@ -42,14 +46,10 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   };
 
   React.useEffect(() => {
-    if (url !== undefined) {
-      return;
-    }
-
     load();
   });
 
-  if (url === undefined)
+  if (urlRef.current === undefined)
     return (
       <div
         style={{
@@ -63,5 +63,24 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
       </div>
     );
 
-  return <VncScreen url={url} />;
+  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>
+  );
 }