Following bug 1183638, whilst we're initially loading the room list, we'll be displaying "No conversations" - I think we did before then, but its more obvious now. We should come up with some UX, either a spinner or something to make it clear that loading is in progress (in the future, this could also lead into a warning of having trouble connecting if the network is down).

Michael, what spinner could we use in this scenario?

sevaan following up with michael on where the location is for content. adam looking to see

:abr found this spinner. What do you think, Mike? chrome://browser/skin/tabbrowser/loading@2x.png (Screenshot: http://i.sevaan.com/image/250d2w2e3m24) Is it too small?

Working on a custom spinner for Hello. Expect it within the next day.

(In reply to Michael Maslaney [:mmaslaney] (mmaslaney@mozilla.com) from comment #5) > Created attachment 8652992 [details] > FX_Hello-glyph-spinner-16x16.svg Looking at the SVG source, there don't appear to be any animation-related elements. Can you check that you exported it correctly?

Here's my attempt to add animate tags to the spinner manually.

Ugh. Messed up the math on that one. This should look smoother.

Comment on attachment 8653575 [details] animated-spinner.svg Looks awesome.

LOVE.

I'm assuming the begin="0.78" should be changed to begin="0.78s" to match the other begin= attributes. > <animate attributeType="CSS" attributeName="opacity" from="1.0" to="0.15" dur="0.96s" repeatCount="indefinite" begin="0.70s"/> >- <animate attributeType="CSS" attributeName="opacity" from="1.0" to="0.15" dur="0.96s" repeatCount="indefinite" begin="0.78"/> >+ <animate attributeType="CSS" attributeName="opacity" from="1.0" to="0.15" dur="0.96s" repeatCount="indefinite" begin="0.78s"/> > <animate attributeType="CSS" attributeName="opacity" from="1.0" to="0.15" dur="0.96s" repeatCount="indefinite" begin="0.86s"/>

Some reason the animated svg doesn't get animated in the panel.

How large should the spinner be? And there should be no create room button because it would be disabled anyway? Or show it as disabled?

Some reason I feel that I needed to work around svg animations in xul before... Using html img works fine for animation.

Looks like react might be getting state/props changes that result in a new img being used resulting in the animation restarting. Probably need to use some key="" to get it to reuse the element.

(In reply to Ed Lee :Mardak from comment #16) > Some reason I feel that I needed to work around svg animations in xul > before... Using html img works fine for animation. Maybe there's something that needs tweaking for an about: page? Given we're running in content mode with html, we shouldn't be affected. One thought: could the svg be making extra "network" requests to make the animation work? iirc we have a general issue with not being able to do loads of chrome uris outside of the initial load/css.

abr found bug 1008598. This doesn't actually depend on that bug as we'll just use a plain image instead of a background image.

Comment on attachment 8655837 [details] v1 screenshot (In reply to Ed Lee :Mardak from comment #15) > Created attachment 8655837 [details] > v1 screenshot > > How large should the spinner be? And there should be no create room button > because it would be disabled anyway? Or show it as disabled? Let's make the spinner 66px, and I think we can keep the context/start a conversation button and just disabled them. That way the transition from spinner to the no-conversations UI won't be so startling. http://i.sevaan.com/image/3X1h3G2A2C0a

Comment on attachment 8656451 [details] v2 screenshot +r for layout...Michael, the blue seems different to the other blues used here. Is that something for us to be concerned about now, or will we be changing blues slightly after in order to better align with the other panels?

Comment on attachment 8656450 [details] [diff] [review] v2 Review of attachment 8656450 [details] [diff] [review]: ----------------------------------------------------------------- Looks much nicer. r=Standard8 with the comment fixed. ::: browser/components/loop/content/css/panel.css @@ +297,5 @@ > + margin: 5rem 15px; > + text-align: center; > +} > + > +.room-list-loading img { Please can you use a child selector here - they have better performance than descendant selectors.

https://hg.mozilla.org/integration/fx-team/rev/466847c2206cbfb6dc4c287d16e910cd93a99d87 Bug 1194622 - Provide indication of loading when waiting for the room list [r=Standard8]