770634 - Build-in transitions for search results and social

Status: RESOLVED FIXED

(Pancake Graveyard :: Front-end, defect)

Description

[Gordon Brander :gordonb]

PostListView (Search and social lists) need some sort of build-in transition (a fade perhaps)?

Comment 1

[Gordon Brander :gordonb]

Track changes in this imaginatively named branch: https://bitbucket.org/mozillapancake/pancake/changesets/tip/branch(%22css-transitions%22).

Comment 2

[Gordon Brander :gordonb]

Also want build-in for headingListView.

Comment 3

[Gordon Brander :gordonb]

I think we want this animation to be:

* Spinner at smallish size
* Grow to eventual size
* Spinner disappears
* Fade in

Comment 4

[Gordon Brander :gordonb]

Currently, ListView renders data as it comes in. If there are no items, it hides itself. In order to add loading states, we must make our ListView more nuanced.

Actions:

* An initial `reset` that renders the main DOM framework of the ListView, along with any items for the collection that are present. Called in the `initialize` method.
* A `resetViews` call that is bound to collection `reset` events. It empties just the list element and re-renders all items.
* `fallback`, which renders a different DOM element or does some hide/show magic when the collection is empty.
* `render` for all other view updates.
* `addView`
* `removeView`
* `moveView`

This looks a bit like a state machine, but let's avoid that if possible.

Chaplain does something similar. They also manage sub-views via a registry, in much the same way we do.

<https://github.com/chaplinjs/chaplin/blob/master/src/chaplin/views/collection_view.coffee>

Comment 5

[Gordon Brander :gordonb]

I've made significant progress on transition states as of https://bitbucket.org/mozillapancake/pancake/changeset/e7f944d22af1. Still on the agenda: a decent spinner image and better transition states for search results.

Comment 6

[Gordon Brander :gordonb]

Spinner image added in https://bitbucket.org/mozillapancake/pancake/changeset/eea199048298.

Comment 7

[Gordon Brander :gordonb]

Branch css-transitions closed https://bitbucket.org/mozillapancake/pancake/changeset/92f3fb39e237. Work continues in https://bitbucket.org/mozillapancake/pancake/changesets/tip/branch(%22accordion-drawer-design%22). Depends on #769498 because of shared code changes.

Comment 8

[Gordon Brander :gordonb]

* URLs view fixed
* Images view fixed
* Suggestions view fixed
* Twitter view fixed

The height animation can still sometimes be tricked with fast typing.

Comment 9

[Gordon Brander :gordonb]

Fixed by by https://bitbucket.org/mozillapancake/pancake/changeset/117def9dd572, which resolves the final remaining issue with fast typing.

Comment 10

[Gordon Brander :gordonb]

The height animation + spinner have a significant negative effect on overall performance.

Comment 11

[Gordon Brander :gordonb]

The changes for this bug should be de-tangled from #769498 changes so we can accurately perf test them, apart and so the drawer can be landed more quickly.

Comment 12

[Gordon Brander :gordonb]

https://bitbucket.org/mozillapancake/pancake/changeset/57978730422d separates build-in work from drawer perf work.

Work for this bug continues in https://bitbucket.org/mozillapancake/pancake/changesets/tip/branch(%22stack-and-search-build-in%22).

Comment 13

[Gordon Brander :gordonb]

Per meeting, we want to take a simple approach to this so we can ship. The main issue is the initial render. Let's make sure the layout happens invisibly so we don't get a jittery feeling when the item is rendered. Beyond that, maybe a spinner for the initial render?

Let's try to avoid making the view a full-blown state machine for now. Emphasis is on wrapping this up with a good enough solution so we can ship.

Comment 14

[Sam Foster [:sfoster] (he/him)]

Have picked at this a bit. I tried various way of laying out the contents off-screen or out of document flow and fading back in to reveal. None really helped much to be honest. 

I have an idea to include a placeholder element in the listview(s) that we can toggle while loading (and show initially). But shoe-horning it in there without breaking stuff is a trick.

Comment 15

[Sam Foster [:sfoster] (he/him)]

I've added an optional bindPlaceholder call in ListView's bindEvents method. If there's an attachPoint.placeholder and a truthy options.showLoadingPlaceholder property it will bind to the collection and do the loading placeholder and animate in thing. 
This works great for the stackheadinglist instance on the home screen. It should also work for the social postlistview, but doesn't. I've spent a couple hours troubleshooting and am ready to pronounce it "good enough".

Comment 16

[Sam Foster [:sfoster] (he/him)]

Now using an animated spinner.gif. Looks fine and performs much better than the css-animated class. Also we're back to an external resource for the image, so i preload it using an AMD plugin to mitigate the loading-while-loading issue. Maybe the animated gif can be converted to a data uri too, meantime this works. 

See https://bitbucket.org/mozillapancake/pancake/changeset/268d0bbf38dc1726d81b8ebfa3d8c7d243b267fb