Managed to load server configuration from WebUI

remote_frontend/src/widgets/AsyncWidget.tsx

@@ -0,0 +1,77 @@
+import { Button, Spinner } from "@fluentui/react-components";
+import React, { useEffect, useRef, useState } from "react";
+
+enum State {
+  Loading,
+  Ready,
+  Error,
+}
+
+export function AsyncWidget(p: {
+  loadKey: any;
+  load: () => Promise<void>;
+  errMsg: string;
+  build: () => React.ReactElement;
+  ready?: boolean;
+  buildLoading?: () => React.ReactElement;
+  buildError?: (e: string) => React.ReactElement;
+  errAdditionalElement?: () => React.ReactElement;
+  loadingMessage?: string;
+}): React.ReactElement {
+  const [state, setState] = useState(State.Loading);
+
+  const counter = useRef<any | null>(null);
+
+  const load = async () => {
+    try {
+      setState(State.Loading);
+      await p.load();
+      setState(State.Ready);
+    } catch (e) {
+      console.error(e);
+      setState(State.Error);
+    }
+  };
+
+  useEffect(() => {
+    if (counter.current === p.loadKey) return;
+    counter.current = p.loadKey;
+
+    load();
+  });
+
+  if (state === State.Error)
+    return (
+      p.buildError?.(p.errMsg) ?? (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            flex: "1",
+            flexDirection: "column",
+          }}
+        >
+          <div style={{ margin: "50px" }}>{p.errMsg}</div>
+
+          <Button onClick={load}>Try again</Button>
+
+          {p.errAdditionalElement && p.errAdditionalElement()}
+        </div>
+      )
+    );
+
+  if (state === State.Loading || p.ready === false)
+    return (
+      p.buildLoading?.() ?? (
+        <Spinner
+          labelPosition="below"
+          label={p.loadingMessage}
+          style={{ margin: "auto" }}
+        />
+      )
+    );
+
+  return p.build();
+}