loading indicator

edde746 · Aug 18, 2023 · 2f2f475 · 2f2f475
1 parent 52868af
commit 2f2f475
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/plugins/gpt/index.jsx b/plugins/gpt/index.jsx
@@ -40,6 +40,31 @@ const getMessageHistory = () => {
   }, []);
 };
 
+const loadingIndicator = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    id="loading-indicator"
+    fill="white"
+  >
+    <path
+      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".25"
+    />
+    <path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        dur="0.75s"
+        values="0 12 12;360 12 12"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
+);
+
 // Credits to yellowsink for this messagebar stuff
 // https://github.com/yellowsink
 const appendTextToMessagebar = (text) => {
@@ -130,6 +155,20 @@ export function onLoad() {
                   },
                 ];
 
+                // add loading indicator
+                const messageBar = document.querySelector(
+                  '[class*="slateContainer-"]'
+                );
+                // get absolute position of messagebar
+                const { x, y } = messageBar.getBoundingClientRect();
+                const loadingIndicatorElem = document.body.appendChild(
+                  loadingIndicator()
+                );
+
+                loadingIndicatorElem.style.position = "absolute";
+                loadingIndicatorElem.style.left = `${x}px`;
+                loadingIndicatorElem.style.top = `${y + 12}px`;
+
                 fetch("https://api.openai.com/v1/chat/completions", {
                   method: "POST",
                   headers: {
@@ -149,6 +188,8 @@ export function onLoad() {
                         .replace(/^(?=.{0,49}:)([\w\s\-]+?[^ ]):/, "")
                         .trim()
                     );
+
+                    loadingIndicatorElem.remove();
                   });
               }}
             >