Turn XML routes into tabs

virtweb_frontend/src/widgets/XMLWidget.tsx

@@ -3,6 +3,8 @@ import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import xmlFormat from "xml-formatter";
 
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import { AsyncWidget } from "./AsyncWidget";
+import React from "react";
 
 SyntaxHighlighter.registerLanguage("xml", xml);
 
@@ -19,3 +21,24 @@ export function XMLWidget(p: { src: string }): React.ReactElement {
     </SyntaxHighlighter>
   );
 }
+
+export function XMLAsyncWidget(p: {
+  identifier: string;
+  load: () => Promise<string>;
+  errMsg: string;
+}): React.ReactElement {
+  const [src, setSrc] = React.useState<string | undefined>();
+
+  const load = async () => {
+    setSrc(await p.load());
+  };
+
+  return (
+    <AsyncWidget
+      errMsg={p.errMsg}
+      load={load}
+      loadKey={p.identifier}
+      build={() => <XMLWidget src={src!} />}
+    />
+  );
+}