iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(startup): remove blocking components loader wait; defer component instantiation until navigation; trigger initial cluster load immediately

Browse Source
This commit is contained in:
0x1d
2025-08-31 14:27:33 +02:00
parent 8b0267ea2a
commit ac6c2fbb80
3 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/scripts/app.js
View File

@@ -8,14 +8,7 @@ document.addEventListener('DOMContentLoaded', async function() {
logger.debug('App: Creating framework instance...'); logger.debug('App: Creating framework instance...');
const app = window.app; const app = window.app;
// Wait for components to be ready (loader ensures constructors exist) // Components are loaded via script tags in order; no blocking wait required
try {
if (typeof window.waitForComponentsReady === 'function') {
await window.waitForComponentsReady();
}
} catch (e) {
logger.warn('App: Components loader timeout; proceeding anyway');
}
// Create view models // Create view models
logger.debug('App: Creating view models...'); logger.debug('App: Creating view models...');

15
public/scripts/components/ClusterViewComponent.js
View File

@@ -49,18 +49,17 @@ class ClusterViewComponent extends Component {
// Only load data if we haven't already or if the view model is empty // Only load data if we haven't already or if the view model is empty
const members = this.viewModel.get('members'); const members = this.viewModel.get('members');
const shouldLoadData = !this.dataLoaded || !members || members.length === 0; const shouldLoadData = true; // always perform initial refresh quickly
if (shouldLoadData) { if (shouldLoadData) {
logger.debug('ClusterViewComponent: Starting initial data load...'); logger.debug('ClusterViewComponent: Starting initial data load...');
// Initial data load - ensure it happens after mounting // Initial data load - ensure it happens after mounting
setTimeout(() => { // Trigger immediately to reduce perceived startup latency
this.viewModel.updateClusterMembers().then(() => { this.viewModel.updateClusterMembers().then(() => {
this.dataLoaded = true; this.dataLoaded = true;
}).catch(error => { }).catch(error => {
logger.error('ClusterViewComponent: Failed to load initial data:', error); logger.error('ClusterViewComponent: Failed to load initial data:', error);
}); });
}, 100);
} else { } else {
logger.debug('ClusterViewComponent: Data already loaded, skipping initial load'); logger.debug('ClusterViewComponent: Data already loaded, skipping initial load');
} }

14
public/scripts/framework.js
View File

@@ -635,8 +635,8 @@ class App {
registerRoute(name, componentClass, containerId, viewModel = null) { registerRoute(name, componentClass, containerId, viewModel = null) {
this.routes.set(name, { componentClass, containerId, viewModel }); this.routes.set(name, { componentClass, containerId, viewModel });
// Pre-initialize component in cache for better performance // Defer instantiation until navigation to reduce startup work
this.preInitializeComponent(name, componentClass, containerId, viewModel); // this.preInitializeComponent(name, componentClass, containerId, viewModel);
} }
// Pre-initialize component in cache // Pre-initialize component in cache
@@ -771,7 +771,15 @@ class App {
async showView(routeName, component) { async showView(routeName, component) {
const container = component.container; const container = component.container;
// Ensure component is mounted (but not necessarily active) // Ensure component is mounted (but not necessarily active); lazy-create now if needed
if (!component) {
const route = this.routes.get(routeName);
const container = document.getElementById(route.containerId);
component = new route.componentClass(container, route.viewModel, this.eventBus);
component.routeName = routeName;
component.isCached = true;
this.componentCache.set(routeName, component);
}
if (!component.isMounted) { if (!component.isMounted) {
logger.debug(`App: Mounting component for '${routeName}'`); logger.debug(`App: Mounting component for '${routeName}'`);
component.mount(); component.mount();