diff --git a/package-lock.json b/package-lock.json
index 9c5dda6..66d9dfb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "eslint-config-react-app": "^7.0.1",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
+        "font-awesome": "^4.7.0",
         "fs-extra": "^10.0.0",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
@@ -10758,6 +10759,14 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
diff --git a/package.json b/package.json
index ebfffaa..eccef5f 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
+    "font-awesome": "^4.7.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
diff --git a/src/components/Converter/index.tsx b/src/components/Converter/index.tsx
index 5c95858..2d10c00 100644
--- a/src/components/Converter/index.tsx
+++ b/src/components/Converter/index.tsx
@@ -6,6 +6,7 @@ import {
   FieldSet,
   Modal,
   Select,
+  Spinner,
   TextArea,
 } from "@grafana/ui";
 import { css } from "@emotion/css";
@@ -49,7 +50,7 @@ const convertConfig = async (
     return {
       diagnostics: [
         {
-          Severity: 1,
+          Severity: 4,
           Summary: "failed to convert: " + (await resp.text()),
           Detail: "",
         },
@@ -63,6 +64,8 @@ const convertConfig = async (
 const Converter = ({ dismiss }: { dismiss: () => void }) => {
   const { setModel } = useModelContext();
 
+  const [loading, setLoading] = useState(false);
+
   const [diags, setDiags] = useState<Diagnostic[]>([]);
   const hasDiagnostics = useMemo(() => {
     return diags.length > 0;
@@ -81,6 +84,19 @@ const Converter = ({ dismiss }: { dismiss: () => void }) => {
   });
   const { register, control, handleSubmit } = formAPI;
 
+  const submit = async (values: ConversionRequest) => {
+    setLoading(true);
+    try {
+      const resp = await convertConfig(values);
+      setDiags(resp.diagnostics);
+      if (resp.data) setConverted(resp.data);
+    } catch (ex) {
+      setDiags([{ Severity: 4, Summary: `${ex}`, Detail: "" }]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
       {!hasDiagnostics && (
@@ -119,15 +135,8 @@ const Converter = ({ dismiss }: { dismiss: () => void }) => {
               </Field>
             </FieldSet>
             <Modal.ButtonRow>
-              <Button
-                type="button"
-                onClick={handleSubmit(async (values) => {
-                  const resp = await convertConfig(values);
-                  setDiags(resp.diagnostics);
-                  if (resp.data) setConverted(resp.data);
-                })}
-              >
-                Next
+              <Button type="button" onClick={handleSubmit(submit)}>
+                Next {loading && <Spinner />}
               </Button>
             </Modal.ButtonRow>
           </form>
diff --git a/src/index.tsx b/src/index.tsx
index 68fa01f..5e89a0f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "rc-drawer/assets/index.css";
+import "font-awesome/css/font-awesome.min.css";
 import App from "./App";
 import { ThemeProvider } from "./theme";
 import { ComponentProvider, ModelProvider } from "./state";
@@ -10,7 +11,7 @@ import { TracingInstrumentation } from "@grafana/faro-web-tracing";
 import { ReactIntegration } from "@grafana/faro-react";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <ThemeProvider>
@@ -19,7 +20,7 @@ root.render(
         <App />
       </ComponentProvider>
     </ModelProvider>
-  </ThemeProvider>
+  </ThemeProvider>,
 );
 if (process.env.REACT_APP_FARO_URL) {
   initializeFaro({