Is there any in GWT to be notified of which snippet will be loaded
There are various chunks in our GWT application, and each one is very large in size (1+ MB). We would like to show a progress bar while GWT is loading the snippet. We are using GWTP based code splitting.
I couldn't find anything related to the fragment load event in the GWT source code. Does anyone have an idea of how the Javascript on the page can be notified which snippet will be loaded next?
source to share
There is no direct way, but you can get around it in basically two ways.
1. - Extending CrossSiteIframeLinker
and overriding the method getJsInstallScript()
so that you can return customized javascript content that might somehow alert the user to the permutation being loaded or just show a counter. Please note that your script must contain code similar to installScriptEarlyDownload.js
orinstallScriptDirect.js
// Your linker class
public class MyXSILinker extends CrossSiteIframeLinker {
@Override
protected String getJsInstallScript(LinkerContext context) {
return "/your_namespace/your_script.js";
}
}
// your "/your_namespace/your_script.js" script
function installScript(filename) {
}
// your module file
<define-linker name="mylinker" class="...MyXSILinker" />
<add-linker name="mylinker" />
2.- Using the function window.__gwtStatsEvent
. You can define a function in index.html
to start the download loader when the application download script is added to your document, then use your gwt code to remove that.
// In your index.html
<head>
<script>
window.__gwtStatsEvent = function(r) {
if (r.type == 'scriptTagAdded') {
d = document.createElement('div')
d.id = 'loading'
d.innerHTML = 'Loading...'
document.body.appendChild(d);
}
}
</head>
</script>
// In your EntryPoint class
Document.get().getElementById("loading").removeFromParent();
To show an accurate progress bar is rather difficult because the tag <script>
doesn't support progress events. So the best approach should be a linker loading the permutation using ajax, as you can use html5 progress events on the object xhr
.
I would use approach # 2 showing a nice spinner, animated css.
source to share