Page MenuHomePhabricator

Newcomer tasks: on mobile 'Suggested edits' activation will flash 'Start here' module and Homepage
Closed, ResolvedPublic

Description

  1. A user clicks on 'Start editing' on Homepage - Start module overlay will be presented and a user clicks on 'See suggested edits' button
  2. A user goes through two-step intro overlay and clicks 'Get suggestions' on the second intro overlay
  3. Without any additional actions on user's part - the following screens will follow in rapid sequence before Suggested edits will finally load:
Screen Shot 2019-11-11 at 11.19.55 PM.png (618×387 px, 110 KB)
Screen Shot 2019-11-11 at 11.20.04 PM.png (617×388 px, 74 KB)
Screen Shot 2019-11-11 at 10.52.53 PM.png (615×365 px, 50 KB)

Click below to see animated gif:

flashing_frames1.gif (610×383 px, 332 KB)

Event Timeline

MMiller_WMF renamed this task from Newcomer tasks - on mobile 'Suggested edits' activation will flash 'Start here' module and Homepage to Newcomer tasks: on mobile 'Suggested edits' activation will flash 'Start here' module and Homepage.Nov 12 2019, 11:12 PM
MMiller_WMF added subscribers: Tgr, kostajh, marcella.

The steps are:

  1. user starts off at #/homepage/start, clicking on the Done button of the intro overlay (screenshot [1])
  2. dialog closes, exposing the start module detail view (without suggested edits) (screenshot [2], first flash)
  3. page reloads and at the same time navigates to #/homepage/suggested-edits
  4. while the JS spins up, user sees the server-side rendered page (fragment URL gets ignored), which is like #2 but with the suggested edits related changes (one less start module sub-item etc) (screenshot [3], second flash)
  5. JS overlays the suggested edits overlay, which is in the server-side rendered HTML but hidden by default (third flash)
  6. suggested edits overlay loads the first task suggestion card (fourth "flash" although this one is less jarring)

Closing the gap between 1-3 would be an easy fix, just reload without closing the dialog. The one between 5-6 can be handled with T236738: Newcomer tasks: server-side rendered version of suggested edits module, or with a loading animation. I don't think 4 can be avoided in any other way than not doing a reload in the first place (T238179: Newcomer tasks: get rid of reload after suggested edits initiation). If we go that way, then the new homepage layout (including the suggested edits module) could be loaded before closing the dialog, so there are no flashes at all.

So I think the low-effort way is keeping the dialog open while the page starts reloading, and maybe have a loading animation (or T238231: Newcomer tasks: show skeleton screen while loading although not sure if that's still low-effort, it would involve moving most of the markup that's now created via OOUI components to the server side). The high-effort way is T236738: Newcomer tasks: server-side rendered version of suggested edits module + T238179: Newcomer tasks: get rid of reload after suggested edits initiation.

@MMiller_WMF we ended up prioritizing this down, but I'm not sure by how much. Ie. is this up next now that the deploy week is over, or something for later?

@Tgr -- Yes! It is next up. Thank you for checking.

Per discussion today: prevent the dialog from closing (quick & easy, should improve things a little, will be needed anyway if we get rid of the reload) then do T238179: Newcomer tasks: get rid of reload after suggested edits initiation.