Show animation while HTML is downloading

[samreid]

As described in #68, we can show smooth animation while the HTML is downloading by putting the loading animation code near the top of the HTML, see #68 (comment) for sample code + prototype.

While the HTML is downloading, we are not constrained to a small number of steps as we are for showing loading progress during JS execution as in #348.

We will have to decide what this should look like and how it will interplay with the JS execution loading progress indicator.

I'm also assigning @jbphet and @schmitzware because they previously expressed an interest in this feature.

[samreid]

If we want to animate the dots in "Loading..." we will likely need to move the word "loading" out of the splash svg and just include text as a normal span. @ariel-phet it seems the proposed strategy in #68 (comment) will work and give us the flexibility to show smooth animation while the HTML continues downloading.

Hence, the next step is for us to decide what it should look like while the HTML is downloading. @ariel-phet Can you work on this design or delegate to a design team member? We have previously discussed flying the airplane around or animating the "..." in "Loading". Other concerns:

1. Whatever is designed for animation during HTML downloading should coordinate (stylistically) with whatever is designed for progress animation during JS execution, see Show progress indicator while JS loading #348
2. Will we want to keep the word "Loading" if we now have other indicators? Keep in mind that text in the splash screen is not translatable with our existing infrastructure.

[ariel-phet]

@samreid since the word "Loading" is not translatable, I would opt to remove the text and just have a simple progress bar. I think what you have done for a progress bar is pretty good already and we might pixel polish a little, but I am leaning much more towards simple and clear than fancy.

[ariel-phet]

@samreid can the JS and HTML downloading in essence be weaved into a single animation (like a simple progress bar)

Perhaps the first half of the bar is loading HTML, and then the second half is the JS, or such.

[samreid]

Perhaps the first half of the bar is loading HTML, and then the second half is the JS, or such.

I'm not aware of any way to judge the progress of the HTML file download. @mattpen or @jonathanolson may know of something. If that is not possible, then the "downloading" phase would have to be an indeterminate animation (i.e. an animation that continues and has no start/end). I can think of a few ways to combine this with the js loading progress bar, but I'm not too excited about any of them. @ariel-phet any suggestions?

[samreid]

Idea: perhaps we can query document or document.body or look for the scripts to see how many or how long they are? I'm not sure if they are all or none, though.

[ariel-phet]

Ah... @samreid, so I understand clearly, the progress bar currently is just the JS loading phase? You are thinking of sort of a "warm up" animation before that? Perhaps just a strobing glow effect on the progress bar until the JS starts?

[samreid]

the progress bar currently is just the JS loading phase?

Yes, precisely. Issue #348 is about indicating progress changes in steps every time a screen is loaded.

You are thinking of sort of a "warm up" animation before that? Perhaps just a strobing glow effect on the progress bar until the JS starts?

I'll investigate ideas like #349 (comment) to see if we can get a deterministic progress on the HTML download, but I think there is only a 20% chance or so that we can get something like that working. If we can't get it working, then we'll need an indeterminate (but continuous instead of stepwise) loading phase before the "bar part". Glowing the progress bar sounds pretty good.

[ariel-phet]

@samreid I think not a major need for the deterministic part. Mainly we just want to give the user some active feedback. so I think you could hop right into the glow...sort "I am getting ready to start" and then have the progress bar go.

Especially for users who have a slow connection, once they see this a few times I think it will give that comforting "hey something is happening" feeling.

[samreid]

I'd like to wait until @jbphet has reviewed #348 and we have changes merged to master before continuing here.

[samreid]

Now I realize why @ariel-phet's colleague suggested the 2-file approach, we could load the sim HTML over XHR and monitor the download progress. Single file + indeterminate animation seems easier though.

[samreid]

Unassigning until November based on discussion in https://github.com/phetsims/special-ops/issues/40

[samreid]

The two file + xhr solution may be the standard/simplest way to implement this, but if we constrain ourselves to the single HTML file, there may still be a way to achieve the desired behavior. I noticed that as the HTML file downloads, the DOM can update. We know this because HTML in the HTML file renders the splash screen with the empty progress bar. If we could intersperse HTML fragments throughout the document, we may be able to simulate the progress bar filling up, by adding more HTML fragments as it loads. Our code is somewhat monolithic and may be difficult to fragment, but a few coarse steps may not be too tricky. Or it may not work at all. I'm not planning to investigate this at the moment but thought I would jot down this idea after reading through #397.

[jonathanolson]

Our code is somewhat monolithic and may be difficult to fragment

It may be possible to have require.js split it for every module.

[samreid]

Reassigning to @ariel-phet to see if he wants to investigate getting requirejs to split up modules somehow and interleave HTML fragments between modules to try to show updates while downloading.

[zepumph]

@samreid let me know if you need help on this.

[mattpen]

@samreid - Please reassign me if there's anything else I can help out with.

[samreid]

I presume the pulsating should stop when the HTML is fully downloaded. I saw a version that had the loading bar moving to the right while the border was pulsating and it did not look great.

[samreid]

Proposed implementation is above, but I'm waiting to hear about IE before posting a next dev version for this.

[samreid]

This is out for testing in the aforementioned issue.

[samreid]

@ariel-phet will review this in phetsims/qa#36

[ariel-phet]

Looks good to me (tried simulated slow internet)

[phet-steele]

@samreid I like it! You hardly ever see any pulsing on iPad2 due to pretty poor performance and low frame rate while loading, but I don't think we mind? Otherwise, I don't see it breaking.

[samreid]

Excellent, thanks, closing.