diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css index 9b6c7d91b86..df787ccbc29 100644 --- 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 index 2d310a64d5c..005189f8b7e 100644 --- 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($(`
`)); + $selector.after($(`
`)); await onMarkupRendered(); $(`.spinner-${widget.id}`).remove(); diff --git a/src/opnsense/www/js/widgets/Interfaces.js b/src/opnsense/www/js/widgets/Interfaces.js index 764b460c1bd..23b7c4161a6 100644 --- 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) {