fix(loading): provide instant feedback and report loading time

Author: jourdain

src/e3sm_quickview/app.py

@@ -3,6 +3,7 @@
 import json
 import math
 import os
+import time
 from functools import partial
 from pathlib import Path
 
@@ -450,10 +451,15 @@ def data_loading_hide(self):
         ]
 
     def data_load_variables(self):
+        self.state.loading = True
         asynchronous.create_task(self._data_load_variables())
 
     async def _data_load_variables(self):
         """Called at 'Load Variables' button click"""
+        t0 = time.perf_counter()
+        # Give some room
+        await asyncio.sleep(0.1)
+
         vars_to_show = self.selected_variables
 
         # Flatten the list of lists
@@ -477,17 +483,25 @@ async def _data_load_variables(self):
         # Trigger source update + compute avg
         with self.state:
             self.state.variables_loaded = True
+
         await self.server.network_completion
 
         # Update views in layout
         with self.state:
             self.view_manager.build_auto_layout(vars_to_show)
+
         await self.server.network_completion
 
         # Reset camera after yield
         await asyncio.sleep(0.1)
         self.view_manager.reset_camera()
 
+        # Done with the loading
+        t1 = time.perf_counter()
+        with self.state:
+            self.state.loading = False
+            self.state.loading_time = t1 - t0
+
     @change("layout_grouped")
     def _on_layout_change(self, **_):
         vars_to_show = self.selected_variables

src/e3sm_quickview/components/drawers.py

@@ -74,6 +74,8 @@ def __init__(self, load_variables=None):
             style=(f"{js.is_active('select-fields')} ? 'transform: none;' : ''",),
         )
 
+        self.state.setdefault("loading_time", 0)
+
         with self:
             with html.Div(
                 style="position:fixed;top:0;width: 500px;height:100vh;",
@@ -85,12 +87,13 @@ def __init__(self, load_variables=None):
                         color="primary",
                         prepend_icon="mdi-database",
                         text=(
-                            "`Load ${variables_selected.length} variable${variables_selected.length > 1 ? 's' :''}`",
+                            "`Load ${variables_selected.length} variable${variables_selected.length > 1 ? 's' :''} ${ loading_time ? ('(' + loading_time.toFixed(1) + ' s)') : ''}`",
                         ),
                         variant="flat",
                         disabled=(
-                            "variables_selected.length === 0 || variables_loaded",
+                            "variables_selected.length === 0 || variables_loaded || loading",
                         ),
+                        loading=("loading", False),
                         click=load_variables,
                         block=True,
                     )