feat: add loading spinner

Signed-off-by: Jan Pokorný <JenomPokorny@gmail.com>
i-am-bee · Dec 10, 2024 · 202bba4 · 202bba4
1 parent e16b7ef
commit 202bba4
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,14 @@
 
   <body class="cds--white">
     <div id="root"></div>
+    <div id="loading">
+      <div class="backdrop"></div>
+      <svg class="spinner" width="100" height="100">
+        <circle cx="50" cy="50" r="44" stroke="#0f62fe" stroke-width="10" fill="none" stroke-dasharray="235">
+          <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/>
+        </circle>
+      </svg>
+    </div>
     <script src="/public/stlite/stlite.js"></script>
     <script src="src/entry.ts" type="module"></script>
   </body>

diff --git a/src/entry.ts b/src/entry.ts
@@ -16,7 +16,7 @@ const ALLOWED_ORIGINS = (import.meta.env.VITE_ALLOWED_FRAME_ANCESTORS ?? '').spl
       entrypoint: 'trigger.py',
       files: {
         'trigger.py': 'import run; await run.run()',
-        'app.py': '',
+        'app.py': 'async def main():\n  pass',
         'config.json': '{}',
         'run.py': runPy,
       },

diff --git a/src/python/run.py b/src/python/run.py
@@ -1,6 +1,5 @@
 import ast
 import asyncio
-import runpy
 import functools
 import importlib
 import inspect
@@ -169,7 +168,6 @@ def error_fragment(error_text):
 @st.fragment
 def llm_function_rate_limit_exceeded_error_fragment():
     st.error("You have exceeded the limit for using LLM functions.")
-    js.postMessage(json.dumps({"type": "bee:reportRateLimitExceededError"}))
 
 
 def identify_modules(source_code: str) -> set[str]:

diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -710,3 +710,38 @@
     }
   }
 }
+
+#loading {
+  & {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 9998;
+
+    visibility: hidden;
+  }
+
+  #root:has(.stApp[data-test-script-state="running"]) ~ & {
+    visibility: visible;
+  }
+
+  .backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 9998;
+    background: var(--cds-overlay);
+  }
+
+  .spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+  }
+}