Keep Loading Screen Up Longer in WAB

[NathanHeickLACSD]

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

[RobertScheitlin__GISP · Accepted solution]

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();
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[NathanHeickLACSD]

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.

[RobertScheitlin__GISP]

Nathan,

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

[NathanHeickLACSD]

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.