From 2ba081af0974854ea3bb58fc49180f6358482cb4 Mon Sep 17 00:00:00 2001 From: Tim Hostetler Date: Sun, 11 Mar 2018 22:29:33 -0400 Subject: [PATCH 1/3] Add Progress Bar --- src/index.html | 62 +++++++++++++++++++++++++++++------ src/js/apps/discovery/main.js | 14 ++++++-- 2 files changed, 64 insertions(+), 12 deletions(-) diff --git a/src/index.html b/src/index.html index 9b39f2a77..141589bcf 100644 --- a/src/index.html +++ b/src/index.html @@ -2,14 +2,14 @@ - - - + + + NASA/ADS Search (Beta Interface) - + @@ -27,11 +27,23 @@
-
-
astrophysics
-
data system
-
- loading... +
+
+
astrophysics
+
data system
+
+
+
+
+ loading... +
+
+
0% Complete
+
+
+ +
+
@@ -47,9 +59,39 @@ window.require = { waitSeconds: 30 }; + + (function () { + var progressBar = document.getElementById('app_loading_progress'); + var message = document.getElementById('app_loading_message'); + var progressInner = document.querySelector('#app_loading_progress>div'); + var progressValue = 0; + + window.__setAppLoadingProgress = function (val, msg) { + progressBar.setAttribute('aria-valuenow', val); + progressBar.style = 'width: ' + val + '%'; + progressInner.innerText = val + '% Complete'; + message.innerHTML = msg ? msg : message.innerHTML; + progressValue = val; + }; + setTimeout(function () { window.__setAppLoadingProgress(10); }, 200); + setTimeout(function () { window.__setAppLoadingProgress(15); }, 500); + window.__setAppLoadingProgress(5, 'Downloading Assets'); + window.__PAGE_LOAD_TIMESTAMP = new Date(); + + setTimeout(function check () { + if (progressValue !== 100) { + var msg = 'Loading the application is taking a long time... '; + msg += ''; + window.__setAppLoadingProgress(progressValue, msg); + } else { + setTimeout(check, 10000); + } + }, 10000); + })(); + - + diff --git a/src/js/apps/discovery/main.js b/src/js/apps/discovery/main.js index 84c36d289..6c74739b1 100644 --- a/src/js/apps/discovery/main.js +++ b/src/js/apps/discovery/main.js @@ -26,11 +26,15 @@ define(['config', 'module'], function(config, module) { Application, DiscoveryBootstrap, ApiAccess - ) { + ) { + + var updateProgress = (typeof window.__setAppLoadingProgress === 'function') ? + window.__setAppLoadingProgress : function () {}; + Application.prototype.shim(); // at the beginning, we don't know anything about ourselves... - var debug = window.location.href.indexOf('debug=true') > -1 ? true : false; + var debug = window.location.href.indexOf('debug=true') > -1; // app object will load everything var app = new (Application.extend(DiscoveryBootstrap))({'debug': debug, timeout: 30000}); @@ -38,8 +42,11 @@ define(['config', 'module'], function(config, module) { // load the objects/widgets/modules (using discovery.config.js) var defer = app.loadModules(module.config()); + updateProgress(20, 'Starting Application'); + // after they are loaded; we'll kick off the application defer.done(function() { + updateProgress(50, 'Modules Loaded'); // this will activate all loaded modules app.activate(); @@ -47,10 +54,13 @@ define(['config', 'module'], function(config, module) { var pubsub = app.getService('PubSub'); pubsub.publish(pubsub.getCurrentPubSubKey(), pubsub.APP_LOADED); + // set some important urls, parameters before doing anything app.configure(); + updateProgress(95, 'Finishing Up...'); app.bootstrap().done(function (data) { + updateProgress(100); app.onBootstrap(data); pubsub.publish(pubsub.getCurrentPubSubKey(), pubsub.APP_BOOTSTRAPPED); From 805e20b90b35588c5154d2c13a5896ec0676823c Mon Sep 17 00:00:00 2001 From: Tim Hostetler Date: Thu, 8 Mar 2018 15:19:43 -0500 Subject: [PATCH 2/3] add google analytics timing for app load --- src/index.html | 2 ++ src/js/apps/discovery/main.js | 28 +++++++++++++++++----------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index 141589bcf..ed2b2a9fb 100644 --- a/src/index.html +++ b/src/index.html @@ -60,6 +60,7 @@ waitSeconds: 30 }; + // Progress Bar (function () { var progressBar = document.getElementById('app_loading_progress'); var message = document.getElementById('app_loading_message'); @@ -78,6 +79,7 @@ window.__setAppLoadingProgress(5, 'Downloading Assets'); window.__PAGE_LOAD_TIMESTAMP = new Date(); + // Show a reload button if the page is taking too long setTimeout(function check () { if (progressValue !== 100) { var msg = 'Loading the application is taking a long time... '; diff --git a/src/js/apps/discovery/main.js b/src/js/apps/discovery/main.js index 6c74739b1..f1af08398 100644 --- a/src/js/apps/discovery/main.js +++ b/src/js/apps/discovery/main.js @@ -20,13 +20,9 @@ define(['config', 'module'], function(config, module) { 'js/components/application', 'js/mixins/discovery_bootstrap', 'js/mixins/api_access', + 'analytics', 'es5-shim' - ], - function(Router, - Application, - DiscoveryBootstrap, - ApiAccess - ) { + ], function(Router, Application, DiscoveryBootstrap, ApiAccess, analytics) { var updateProgress = (typeof window.__setAppLoadingProgress === 'function') ? window.__setAppLoadingProgress : function () {}; @@ -54,7 +50,6 @@ define(['config', 'module'], function(config, module) { var pubsub = app.getService('PubSub'); pubsub.publish(pubsub.getCurrentPubSubKey(), pubsub.APP_LOADED); - // set some important urls, parameters before doing anything app.configure(); @@ -90,6 +85,21 @@ define(['config', 'module'], function(config, module) { window.bbb = app; } + // app is loaded, send timing event + + if (__PAGE_LOAD_TIMESTAMP) { + var time = new Date() - __PAGE_LOAD_TIMESTAMP; + analytics('send', { + hitType: 'timing', + timingCategory: 'Application', + timingVar: 'Loaded', + timingValue: time + }); + if (debug) { + console.log('Application Started: ' + time + 'ms'); + } + + } }).fail(function () { app.redirect('500.html'); }); @@ -104,8 +114,4 @@ define(['config', 'module'], function(config, module) { }); }); - - - - }); From 0744c9412a12d1b38572a67028a01fe06c95465e Mon Sep 17 00:00:00 2001 From: Tim Hostetler Date: Sun, 11 Mar 2018 21:42:45 -0400 Subject: [PATCH 3/3] Remove MathJax Loading Messages --- src/discovery.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/discovery.config.js b/src/discovery.config.js index 7df833d76..78d24b387 100644 --- a/src/discovery.config.js +++ b/src/discovery.config.js @@ -281,6 +281,7 @@ require.config({ exports: "MathJax", init: function () { MathJax.Hub.Config({ + messageStyle: 'none', HTML: ["input/TeX","output/HTML-CSS"], TeX: { extensions: ["AMSmath.js","AMSsymbols.js"], equationNumbers: { autoNumber: "AMS" } },