add a loading spinner

aiidalab · Jan 23, 2025 · 9df9d38 · 9df9d38
1 parent a7e1908
commit 9df9d38
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 13 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -19,7 +19,6 @@ repos:
     hooks:
         - id: nbqa-pyupgrade
           args: [--py39-plus]
-        - id: nbqa-ruff
 
   - repo: https://github.com/kynan/nbstripout
     rev: 0.6.1

diff --git a/optimade-client.ipynb b/optimade-client.ipynb
@@ -79,18 +79,11 @@
    "source": [
     "display(summary)"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
+   "display_name": "ipyoptimade",
    "language": "python",
    "name": "python3"
   },
@@ -104,7 +97,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.19"
+   "version": "3.10.16"
   }
  },
  "nbformat": 4,

diff --git a/src/ipyoptimade/query_filter.py b/src/ipyoptimade/query_filter.py
@@ -2,6 +2,7 @@
 from enum import Enum, auto
 from json import JSONDecodeError
 from typing import List, Union
+from IPython.display import display
 
 import ipywidgets as ipw
 import requests
@@ -24,6 +25,7 @@
 from ipyoptimade.utils import (
     SESSION,
     TIMEOUT_SECONDS,
+    SPINNER_HTML,
     ButtonStyle,
     check_entry_properties,
     get_sortable_fields,
@@ -110,10 +112,14 @@ def __init__(
         self.__cached_ranges = {}
         self.__cached_versions = {}
         self.database_version = ""
-
-        self.filter_header = ipw.HTML(
-            '<h4 style="margin:0px;padding:0px;">Apply filters</h4>'
+        self.loading_spinner_output = ipw.Output()
+        self.filter_header = ipw.HBox(
+            [
+                ipw.HTML('<h4 style="margin:0px;padding:0px;">Apply filters</h4>'),
+                self.loading_spinner_output,
+            ]
         )
+
         self.filters = FilterTabs(show_large_filters=not embedded)
         self.filters.freeze()
         self.filters.on_submit(self.retrieve_data)
@@ -157,6 +163,13 @@ def __init__(
             **kwargs,
         )
 
+    def _set_loading_spinner(self, on: bool = True):
+        """Show or hide loading spinner"""
+        with self.loading_spinner_output:
+            self.loading_spinner_output.clear_output()
+            if on:
+                display(ipw.HTML(SPINNER_HTML))
+
     @traitlets.observe("database")
     def _on_database_select(self, _):
         """Load chosen database"""
@@ -178,6 +191,7 @@ def _on_database_select(self, _):
                 self.query_button.description = "Updating ..."
                 self.query_button.icon = "cog"
                 self.query_button.tooltip = "Updating filters ..."
+                self._set_loading_spinner(True)
 
                 self._set_intslider_ranges()
                 self._set_version()
@@ -193,6 +207,7 @@ def _on_database_select(self, _):
                 self.sort_selector.valid_fields = sorted(
                     get_sortable_fields(self.database[1].base_url)
                 )
+                self._set_loading_spinner(False)
                 self.unfreeze()
 
     def _on_structure_select(self, change):
@@ -244,6 +259,8 @@ def _get_more_results(self, change):
             self.query_button.icon = "cog"
             self.query_button.tooltip = "Please wait ..."
 
+            self._set_loading_spinner(True)
+
             # Query database
             response = self._query(pageing)
             msg, _ = handle_errors(response)
@@ -263,6 +280,7 @@ def _get_more_results(self, change):
             self.query_button.description = "Search"
             self.query_button.icon = "search"
             self.query_button.tooltip = "Search"
+            self._set_loading_spinner(False)
             self.unfreeze()
 
     def _sort(self, change: dict) -> None:
@@ -561,6 +579,8 @@ def retrieve_data(self, _):
             self.query_button.icon = "cog"
             self.query_button.tooltip = "Please wait ..."
 
+            self._set_loading_spinner(True)
+
             # Query database
             response = self._query()
             msg, _ = handle_errors(response)
@@ -600,4 +620,5 @@ def retrieve_data(self, _):
             self.query_button.description = "Search"
             self.query_button.icon = "search"
             self.query_button.tooltip = "Search"
+            self._set_loading_spinner(False)
             self.unfreeze()
diff --git a/src/ipyoptimade/utils.py b/src/ipyoptimade/utils.py
@@ -68,6 +68,21 @@
     DEVELOPMENT_MODE = False
 
 
+SPINNER_HTML = """
+<div id="spinner" style="display:inline;">
+    <div style="border: 4px solid #333333; border-radius: 50%;
+    border-top: 4px solid #3498db; width: 12px; height: 12px;
+    animation: spin 2s linear infinite;"></div>
+</div>
+<style>
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+</style>
+"""
+
+
 class DefaultingEnum(EnumMeta):
     """Override __getitem__()"""