[TAP5-2371] Prevent interaction with page until fully loaded

• Type: New Feature
• Status: Closed
• Priority: Major
• Resolution: Fixed
• Affects Version/s: 5.4
• Fix Version/s: 5.4
• Component/s: tapestry-core
• Labels: javascript
• Assignee: Howard Lewis Ship
• Reporter: Howard Lewis Ship
• Created: 07/Aug/14 18:35
• Updated: 02/Sep/14 19:10
• Resolved: 07/Aug/14 18:55

Description

With the emphasis on JavaScript, there is an issue where a user on a slow connection interacts with the page before the page has fully loaded its JavaScript and run initializations. This can lead to client-side JavaScript exceptions, or server-side failures (when ordinary requests are sent to URLs that expect an Ajax/XHR request).

The right solution is for Tapestry to provide a "pageloading mask", a div that masks the entire page from user input (and provides a loading image) until page initializations complete.

The implementaton of this uses a <script> tag, with document.write, to introduce the mask element at the top of the page (so that non-JavaScript-enabled clients will be able to interact with the page to some degree).

CSS animations are used to fade in the mask after a delay. The presentation of the mask can be modified via CSS overrides. By default, it is black with 50% opacity.

Issue Links

• is related to: TAP5-2360 Floating console appears in production mode