frontend/chargers: move getting the secret from frame to chargers component.

This fixes the problem with the charger list popping up for a second b6686e4 was intended to fix.

Author: ffreddow

frontend/src/components/Frame.tsx

@@ -87,10 +87,7 @@ class VirtualNetworkInterface {
     }
 
     // This waits for the Worker to be done with the setup
-    async setupHandler(e: MessageEvent) {
-        if (!secret) {
-            await get_decrypted_secret();
-        }
+    setupHandler(e: MessageEvent) {
         if (e.data === "started") {
             this.worker.onmessage = (e) => this.handleWorkerMessage(e);
             const message_data: SetupMessage = {

frontend/src/pages/chargers.tsx

@@ -23,6 +23,7 @@ import { ChargerListComponent } from "../components/charger_list";
 import { connected } from "../components/Navbar";
 import Median from "median-js-bridge";
 import { get_decrypted_secret, secret } from "../utils";
+import { Row, Spinner } from "react-bootstrap";
 
 export interface ChargersState {
     connected: boolean;
@@ -41,23 +42,33 @@ export function ChargerList() {
     const [loaded, setLoaded] = useState(false);
 
     if (Median.isNativeApp() && !loaded) {
-        setTimeout(() => {
+        setTimeout(async () => {
+            if (!secret) {
+                await get_decrypted_secret();
+            }
+            setLoaded(true);
             const currentConnection = sessionStorage.getItem("currentConnection");
             try {
                 const currentConnectionObject: ChargersState = JSON.parse(currentConnection);
                 if (currentConnectionObject.connected) {
                     setState(currentConnectionObject);
-                    setLoaded(true)
                 }
             } catch {}
         });
+    } else if (!loaded) {
+        setLoaded(true);
     }
 
     useEffect(() => {
         connected.value = state.connected;
         document.title = state.connectedName == "" ?  "Remote Access" : state.connectedName;
     }, [state])
 
+    if (!loaded) {
+        return <Row className="align-content-center justify-content-center m-0 h-100">
+            <Spinner className="p-3"animation='border' variant='primary'/>
+        </Row>
+    }
     if (!state.connected) {
         return <>
             <ChargerListComponent setParentState={setState} parentState={state} />