Improve row details experience (loading/animation sequence)

[jouni]

The current behavior is less than great, as there is no animation for the opening. Also, if the content of the element is provided lazyly (which should be possible to do), then the row detail element should show some loading animation before the actual content is available, and after that do the opening animation.

The loading indicator and opening transition duration and easing should be customizable by the theme.

UI Design

• Design for the default opening & closing transition (Material Design)
• Design for the default lazy-loading indicator (Material Design)

[tuomasnironen]

I am going to try out another animated/interactive prototype tool for designing the details row transition: UI prototyping with Keynote. Benefits should be that it is quick to learn, integrates easily with Photoshop or Sketch by simple copy/paste, supports various transitions, custom slide sizes and even exporting a document as an interactive html page for prototype testing.
http://www.smashingmagazine.com/2015/08/animating-in-keynote/

Reviewed also quickly Pixate http://www.pixate.com/. Seems to be aimed for mobile/touch device design and has a bit not-intuitive workflow and animation properties. Too limited for my taste. You would have to install also the mobile app to view and try out the designs. Not able to for example export the project for laptop screen that could be viewed with any plugins.

[tuomasnironen]

Added a video demonstrating roughly the details row transition sequence: https://drive.google.com/open?id=0BzkWbWvgmkIxZ3huYkoxS25QZHc

Also an interactive proto is available (runs only in Safari, weird):
https://drive.google.com/open?id=0BzkWbWvgmkIxSFRVMkxRb2dyM3c

Note: Keynote was not a huge success implementing this demo. Potential tool for more straightforward navigation-type protos, though.

TODO:

• Document transition sequence (transition types, timing) in a detailed document.
• Current loading spinner animation is for demo purposes only. Must be designed separately.

[jouni]

The sequence is pretty much how I imaged it, except that the spinner should look like the one we already use for lazy loading rows or the paper-spinner element from Polymer.

Another idea I had for the loading sequence, roughly (click the "row" to toggle it): http://codepen.io/jouni/pen/JYKOOy

How do you feel about the alternatives? Is the second one too ambiguous? The first one gives a more clear indication that new content will appear below the row, I think. But the second one feels more elegant visually (when polished properly), so I’m a little torn :)

[tuomasnironen]

About the spinner design: I agree it should be similar to paper-spinner. In the demo video it was basically forced to look something like that because of the limitations of Keynote (animation would not spin symmetrically otherwise...). This kind of stuff only confirms Keynote is NOT the best tool for all demo scenarios.

Your alternative looks cool and is elegant, but my first reaction was not to start waiting for anything to lazy load. I was a bit confused what was going on, until the details row appeared. I think it would be a more safe bet to rely on the spinner.

[jouni]

I agree. Our default feature should use the spinner, but the other option would be nice to allow technically.

[jouni]

To finalize this task, I think all we need is to define the exact pixels and timings for the transitions.

[tuomasnironen]

Animation sequence

Sequence state	Transition	Duration	Timing
CLOSED
1. Highlight the selected row	(as it is now)
2. Expand details row to fit lazy load spinner	Expand down	0.2s	with state 1
3. Display lazy load spinner	Fade in	0.1s	with state 1
LOADING...
4. Hide lazy load spinner	Fade out	0.1s
5. Expand details row to fit loaded content	Expand down	0.2s	with state 4
6. Display details content	Fade in	0.1s	after state 5
OPEN
7. Hide details content	Fade out	0.2s
8. Shrink details row height to zero	Shrink up	0.2s	with state 7
9. Remove selected row highlight	(as it is now)
CLOSED

[tuomasnironen]

Spinner

• appearance: https://elements.polymer-project.org/elements/paper-spinner?view=demo:demo/index.html
• color: rgb(0, 167, 247)
• margins: top/bottom 10px, horizontally centered

[jouni]

Not really sure if we technically want to use paper-spinner, since it’s an extra dependency for vaadin-grid in that case.

Also, technically, implementing that animation using CSS requires quite a lot of elements, and perhaps we could start with a similarly simple spinner that we currently use when lazy loading rows?

The animations should of course be customizable by the developer, so perhaps we need to support having any arbitrary HTML for the spinner/loading indicator.

[tomivirkki]

I guess this is no longer relevant with grid > 1.0.

The row details content isn't loaded from a data provider or such but it's a defined in a template. If a developer wants to lazily load the details content on open, that's possible with template bindings, but the grid itself would still be unaware of the content loading lazily. This means that the developer can create a loading sequence he desires by utilizing the row details template. Reopen if I got it wrong.

[jouni]

Yeah, this is a “user space” problem. Might still be a nice convenience/helper element that does the progress indication for you – but that’s just a nice-to-have, we have plenty of should-have type of enhancements waiting as well 😅