From ab3ddb6bcdedcd9e3bcc32c47eacb61704e94f82 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <7190048+kegsay@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:40:06 +0000
Subject: [PATCH] Display loading spinner and status messages

---
 index.html            |  2 ++
 src/index.ts          | 18 +++++++++++++++---
 src/state_resolver.ts |  4 ++++
 style.css             | 21 +++++++++++++++++++++
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 43b0d90..cb9034e 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,8 @@
             <input id="stepfwd" type="button" value="&rarr;" />
             <input id="shimurl" type="text" value="https://tardis.element.dev/" placeholder="Shim URL" />
             <input id="resolve" type="button" value="Resolve State" />
+            <div class="loader" id="loader"></div>
+            <span class="loader-status" id="loader-status"></span>
         </div>
         <div id="infocontainer">
             <pre id="closeinfocontainer">[ Close ]</pre>
diff --git a/src/index.ts b/src/index.ts
index 7177568..69d4d61 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -365,12 +365,20 @@ if (existingShimUrl) {
     dag.setShimUrl(existingShimUrl);
 }
 
+const loaderElement = document.getElementById("loader")!;
+const loaderMsgElement = document.getElementById("loader-status")!;
+
+const setLoaderMessage = (text: string) => {
+    loaderMsgElement.innerText = text;
+};
+
 document.getElementById("resolve")!.addEventListener("click", async (ev) => {
     if (!dag.shimUrl) {
         console.error("you need to set a shim url to resolve state!");
         return {};
     }
-    console.log(dag.shimUrl);
+    loaderElement.style.display = "block";
+    setLoaderMessage(`Connecting to ${dag.shimUrl}`);
     try {
         await transport.connect(dag.shimUrl, resolver);
         await dag.debugger.resolve(
@@ -382,19 +390,23 @@ document.getElementById("resolve")!.addEventListener("click", async (ev) => {
                 atEvent: MatrixEvent,
             ): Promise<Record<StateKeyTuple, EventID>> => {
                 try {
+                    setLoaderMessage(`Resolving state at event ${atEvent.event_id}`);
                     const r = await resolver.resolveState(roomId, roomVer, states, atEvent);
                     return r.state;
                 } catch (err) {
                     console.error("failed to resolve state:", err);
+                    setLoaderMessage(`Failed to resolve state at event ${atEvent.event_id} : ${err}`);
+                    throw err;
                 }
-                return {};
             },
         );
+        setLoaderMessage("");
     } catch (err) {
-        console.error("failed to setup WS connection:", err);
+        console.error("resolving state failed: ", err);
     } finally {
         transport.close();
     }
+    loaderElement.style.display = "none";
     dag.refresh();
 });
 
diff --git a/src/state_resolver.ts b/src/state_resolver.ts
index 2ea586c..d745aba 100644
--- a/src/state_resolver.ts
+++ b/src/state_resolver.ts
@@ -102,6 +102,10 @@ class StateResolver implements StateResolverReceiver {
                     resolve({ state: {} });
                     return;
                 }
+                if (resolvedData.error && resolvedData.error !== "") {
+                    reject(resolvedData.error);
+                    return;
+                }
                 resolve({
                     state: resolvedData.result,
                 });
diff --git a/style.css b/style.css
index 65ce71f..5d800d0 100644
--- a/style.css
+++ b/style.css
@@ -15,6 +15,7 @@ body {
     border-color: #00060b;
     border: 1px solid;
     margin: 5px;
+    display: flex;
 }
 
 #infocontainer {
@@ -82,6 +83,26 @@ body {
     flex-grow: 1;
 }
 
+.loader {
+    border: 3px solid #f3f3f3; /* Light grey */
+    border-top: 3px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    animation: spin 1s linear infinite;
+    margin: 0 10 0 10;
+    display: none;
+}
+
+.loader-status {
+
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 .node-text {
     font-family: Gill Sans,Gill Sans MT,Calibri,sans-serif;
 }