dashboard: async call should be awaited, make sure observer can trigg…

…er on content load
rileyg98 · Mar 20, 2024 · 3b138c3 · 3b138c3
1 parent ea90af0
commit 3b138c3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css
@@ -1,5 +1,5 @@
-.fa-circle-o-notch {
-    font-size: 3em;
+.fa-spinner {
+    font-size: 2em;
 }
 
 .grid-stack-item-content {
@@ -27,6 +27,10 @@
     align-items: center;
 }
 
+.widget-spinner {
+    margin-top: 20px;
+}
+
 .fa-stack.small {
     font-size: 0.5em;
 }

diff --git a/src/opnsense/www/js/opnsense_widget_manager.js b/src/opnsense/www/js/opnsense_widget_manager.js
@@ -275,19 +275,7 @@ class WidgetManager  {
      * this has the benefit of making it configurable per widget.
      */
      async _loadDynamicContent() {
-        // map to an array of context-bound _onMarkupRendered functions
-        let fns = Object.values(this.widgetClasses).map((widget) => {
-            return this._onMarkupRendered.bind(this, widget);
-        });
-        // convert each _onMarkupRendered(widget) to a promise
-        let promises = fns.map(func => new Promise(resolve => resolve(func())));
-        // fire away
-        await Promise.all(promises).catch((error) => {
-            console.error('Failed to load dynamic content', error);
-            null;
-        });
-
-        // handle dynamic resize of widgets - do this after the dynamic content has been loaded
+        // handle dynamic resize of widgets
         new ResizeObserverWrapper().observe(
             document.querySelectorAll('.widget'),
             (elem, width, height) => {
@@ -304,6 +292,18 @@ class WidgetManager  {
                 this._updateGrid(elem.parentElement.parentElement);
             }
         );
+
+        // map to an array of context-bound _onMarkupRendered functions
+        let fns = Object.values(this.widgetClasses).map((widget) => {
+            return this._onMarkupRendered.bind(this, widget);
+        });
+        // convert each _onMarkupRendered(widget) to a promise
+        let promises = fns.map(func => new Promise(resolve => resolve(func())));
+        // fire away
+        await Promise.all(promises).catch((error) => {
+            console.error('Failed to load dynamic content', error);
+            null;
+        });
     }
 
     // Executed for each widget; starts the widget-specific tick routine.
@@ -312,7 +312,7 @@ class WidgetManager  {
         let onMarkupRendered = widget.onMarkupRendered.bind(widget);
         // show a spinner while the widget is loading
         let $selector = $(`.widget-${widget.id} > .widget-content > .panel-divider`);
-        $selector.after($(`<div class="spinner-${widget.id}"><i class="fa fa-circle-o-notch fa-spin"></i></div>`));
+        $selector.after($(`<div class="widget-spinner spinner-${widget.id}"><i class="fa fa-spinner fa-spin"></i></div>`));
         await onMarkupRendered();
         $(`.spinner-${widget.id}`).remove();
 

diff --git a/src/opnsense/www/js/widgets/Interfaces.js b/src/opnsense/www/js/widgets/Interfaces.js
@@ -52,7 +52,7 @@ export default class Interfaces extends BaseTableWidget {
     }
 
     async onMarkupRendered() {
-        ajaxGet('/api/interfaces/overview/interfacesInfo', {}, (data, status) => {
+        await ajaxGet('/api/interfaces/overview/interfacesInfo', {}, (data, status) => {
             let rows = [];
             data.rows.map((intf_data) => {
                 if (!intf_data.hasOwnProperty('config') || intf_data.enabled == false) {
@@ -118,10 +118,7 @@ export default class Interfaces extends BaseTableWidget {
             super.updateTable(rows);
 
             $('[data-toggle="tooltip"]').tooltip();
-
-            return super.onMarkupRendered();
         });
-
     }
 
     onWidgetResize(elem, width, height) {