Generally an ExtJs app takes good amount of time to get loaded in the browser when opened for the first time. For really large apps it can take a few seconds to load the first page as well, so user might be staring at a blank screen and wonder what wrong has happened. So it is always good to show something like “App is loading” message with some loading animation to inform user that everything is alright and application is about to start.
Here is an attempt to provide such a loading spinner until the extjs app is ready for use. Below steps are specific for Sencha Architect, but the concept would still be same if implementation is done without the SA tool.
- Your index.html should look like below after creating a project using SA.
Just Add a new <div> inside Body tag.
<div id=”initialLoader” class=”loader”></div>
So your index.html should look like below after this.
2. Create a launch function under Application in SA and add below code to check for an element with id “initialLoader” and remove it when app loading is completed.
3. Create a custom scss resource and add below css rules to give some style to the added div.
4. Disable “overwrite index.html” in your SA preferences so that index.html changes are not overridden after each build.
5. Build and see preview, you should see a loading spinner animation before your app is fully loaded into browser.