Keep Loading Screen Up Longer in WAB

228
4
Jump to solution
04-10-2019 08:53 AM
Occasional Contributor II

Is anyone familiar with where and how to modify the behavior of the loading screen?  Sometimes it comes up and sometimes it doesn't.  Either way, it seems to go away when the map is loaded.  Then, I will see the map for about 6 seconds while all the header controller and other widgets are loading up.  I am using the Splash widget too.  I want the loading screen to stay up behind the Splash widget until it is closed.  If I could get that to happen, I might get a nice background image for the loading screen and get a nice loading GIF.  So, does anyone know where this part of the code is?

Thanks,

Nathan

Tags (1)
Reply
0 Kudos
1 Solution

Accepted Solutions
MVP Esteemed Contributor

Nathan,

   Having the app loading screen stay up until the user click on the splash screen is Not an option. It is possible to have the App Loading stay visible until the Splash Screen is shown. This would eliminate the map and header widget not being ready before the loading screen is removed issue. In the main.js file in your app find the "onAppConfigChanged" function and comment out these lines (8 and 9):

    function onAppConfigChanged(_appConfig, reason){
appConfig = _appConfig;

if(reason === 'loadingPageChange'){
return;
}

//html.setStyle(jimuConfig.loadingId, 'display', 'none');
//html.setStyle(jimuConfig.mainPageId, 'display', 'block');
}

Then in the splash widget.js in the onOpen function make these additions (lines 8 and 9):

      onOpen: function() {
if (!utils.isInConfigOrPreviewWindow()) {
var isFirstKey = this._getCookieKey();
var isfirst = cookie(isFirstKey);
if (esriLang.isDefined(isfirst) && isfirst.toString() === 'false') {
this.close();
}
html.setStyle(window.jimuConfig.loadingId, 'display', 'none');
html.setStyle(window.jimuConfig.mainPageId, 'display', 'block');
}
// if (true === this._requireConfirm) {
// //checkbox
// this.confirmCheck.focus();
// } else if ((false === this._requireConfirm && false === this._showOption) ||
// (false === this._requireConfirm && true === this._showOption)) {
// this.okNode.focus();
// }
if (!this._requireConfirm && !this._showOption) {
this.okNode.focus();
} else {
this.confirmCheck.focus();
}

this._eventShow();
},

View solution in original post

Reply
0 Kudos
4 Replies
MVP Esteemed Contributor

Nathan,

   Having the app loading screen stay up until the user click on the splash screen is Not an option. It is possible to have the App Loading stay visible until the Splash Screen is shown. This would eliminate the map and header widget not being ready before the loading screen is removed issue. In the main.js file in your app find the "onAppConfigChanged" function and comment out these lines (8 and 9):

    function onAppConfigChanged(_appConfig, reason){
appConfig = _appConfig;

if(reason === 'loadingPageChange'){
return;
}

//html.setStyle(jimuConfig.loadingId, 'display', 'none');
//html.setStyle(jimuConfig.mainPageId, 'display', 'block');
}

Then in the splash widget.js in the onOpen function make these additions (lines 8 and 9):

      onOpen: function() {
if (!utils.isInConfigOrPreviewWindow()) {
var isFirstKey = this._getCookieKey();
var isfirst = cookie(isFirstKey);
if (esriLang.isDefined(isfirst) && isfirst.toString() === 'false') {
this.close();
}
html.setStyle(window.jimuConfig.loadingId, 'display', 'none');
html.setStyle(window.jimuConfig.mainPageId, 'display', 'block');
}
// if (true === this._requireConfirm) {
// //checkbox
// this.confirmCheck.focus();
// } else if ((false === this._requireConfirm && false === this._showOption) ||
// (false === this._requireConfirm && true === this._showOption)) {
// this.okNode.focus();
// }
if (!this._requireConfirm && !this._showOption) {
this.okNode.focus();
} else {
this.confirmCheck.focus();
}

this._eventShow();
},

View solution in original post

Reply
0 Kudos
Occasional Contributor II

Hi Robert,

I tried your solution, but it had a lot of unintended side effects.  In IE, there was a big blue box at the top of the top screen and the splash screen had formatting issues.  In Chrome, it didn't display the blue screen at all.

Reply
0 Kudos
MVP Esteemed Contributor

Nathan,

   I did all my testing in Chrome and I just tested in IE11 and Firefox and all work great...

Reply
0 Kudos
Occasional Contributor II

Sorry, I found my mistake.  I copied the code from the main.js file to the Widget.js file, not noticing the difference between jimuConfig and window.jimuConfig.

After I fixed that, it worked pretty well.  The Splash widget scrollbar does not show up for some reason.  Due to some of my customizations, I got better results by only making the change for the loading page and displaying the main page in main.js.  That way, the map and legend finish loading up completely behind the loading page and are fully ready when the loading page is hidden.

Either way, thanks for pointing me to where to begin.