Positive reinforcement: Revise skeleton state and behaviour of the Post-edit dialog
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	RHo
	Nov 2 2021, 1:42 PM

Description

Problem

The post-edit dialog (and success message) can take a long time to appear since it loads the next suggested task before it appears. This delay may lead to the editor navigating away from the task without seeing the next suggestion.

Issue 1. The 'success' message and post-edit dialog takes very long to load on slow connections.
Issue 2. The current 'skeleton'; is not rendering correctly:
- 2a. The image thumbnail skeleton goes blank/white for a couple of secs before loading
- 2b. The wikidata description grey box is in the wrong location (not actually covering where the text appears when loaded.

Video of the current situation (en beta):

Skeleton:

Partially loaded state:

Loaded state:

Issue originally identified on T293316#7471066.

Proposed design

Figma design

Proposed solution

Revise the loading behaviour so that the post-edit dialog is shown immediately after the success message", whilst the task is loading.
Ensure the skeleton (grey shimmer areas) are in the correct position above where content loads.

Details

Subject	Repo	Branch	Lines +/-
Post edit panel: do not wait for tasks request to show the panel	mediawiki/extensions/GrowthExperiments	master	+216 -133
Post edit panel: extract the fallback card construction to a separate method	mediawiki/extensions/GrowthExperiments	master	+44 -34
Post edit panel: show the pageviews in desktop	mediawiki/extensions/GrowthExperiments	master	+2 -2
Newcomer tasks store: mark null properties for failed requests to PCS and AQS	mediawiki/extensions/GrowthExperiments	master	+12 -9
Post edit panel: avoid showing the pageviews skeleton	mediawiki/extensions/GrowthExperiments	master	+4 -4
Post edit panel: show the task description skeleton while requesting the PCS	mediawiki/extensions/GrowthExperiments	master	+10 -6

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	KStoller-WMF	T248330 [EPIC] Growth: Positive reinforcement
Resolved	KStoller-WMF	T317813 [EPIC] Positive Reinforcement: Leveling Up
Open	None	T276517 [EPIC] Growth: "add a link" structured task 3.0
Open	None	T293711 [EPIC] "Add an image" Iteration 2
Resolved	Sgs	T294835 Positive reinforcement: Revise skeleton state and behaviour of the Post-edit dialog

Event Timeline

RHo created this task.Nov 2 2021, 1:42 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 2 2021, 1:42 PM

RHo added parent tasks: T276517: [EPIC] Growth: "add a link" structured task 3.0, T293711: [EPIC] "Add an image" Iteration 2.Nov 2 2021, 1:43 PM

RHo mentioned this in T293316: Add an image: minimal quality gate.Nov 2 2021, 1:45 PM

Tgr moved this task from Inbox to Upcoming Work on the Growth-Team board.Nov 3 2021, 9:08 AM

RHo updated the task description. (Show Details)May 18 2022, 3:57 PM

RHo renamed this task from Add an image: Create a skeleton state of the Post-edit dialog to Add an image: Revise skeleton state and behaviour of the Post-edit dialog.May 18 2022, 4:00 PM

RHo mentioned this in T295670: Allow for retrying timed out requests in GrowthTasksApi.May 18 2022, 4:59 PM

CBogen moved this task from To Do to Growth: Add an Image on the Image-Suggestions board.Jul 7 2022, 6:39 PM

RHo renamed this task from Add an image: Revise skeleton state and behaviour of the Post-edit dialog to Positive reinforcement: Revise skeleton state and behaviour of the Post-edit dialog.Oct 19 2022, 1:31 PM

KStoller-WMF assigned this task to RHo.Nov 4 2022, 6:02 PM

KStoller-WMF triaged this task as Low priority.

KStoller-WMF edited projects, added Growth-Positive-Reinforcement, Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.

KStoller-WMF updated the task description. (Show Details)

KStoller-WMF added a parent task: T317813: [EPIC] Positive Reinforcement: Leveling Up .

KStoller-WMF moved this task from Incoming to Needs Design/Design Doing on the Growth-Team (Sprint 0 (Growth Team)) board.

RHo mentioned this in T311874: Skeleton: Add Skeleton loader component to Codex.Nov 9 2022, 8:10 PM

RHo updated the task description. (Show Details)Nov 30 2022, 11:05 PM

RHo moved this task from Needs Design/Design Doing to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 30 2022, 11:18 PM

MShilova_WMF added a project: GrowthExperiments-LevelingUp.Dec 15 2022, 3:27 PM

KStoller-WMF removed RHo as the assignee of this task.Dec 16 2022, 6:18 PM

KStoller-WMF moved this task from Backlog to Follow-up "Leveling up" tasks (not needed for MVP) on the GrowthExperiments-LevelingUp board.Jan 25 2023, 5:07 PM

KStoller-WMF moved this task from Follow-up "Leveling up" tasks (not needed for MVP) to Week 5 (Feb 27 - Mar 3) on the GrowthExperiments-LevelingUp board.

KStoller-WMF moved this task from Week 5 (Feb 27 - Mar 3) to Week 4 (Feb 20 - 24) on the GrowthExperiments-LevelingUp board.Jan 25 2023, 5:15 PM

KStoller-WMF moved this task from Week 4 (Feb 20 - 24) to Week 3 (Feb 13 - 17) on the GrowthExperiments-LevelingUp board.Jan 25 2023, 5:19 PM

kostajh awarded a token.Jan 30 2023, 12:53 PM

Sgs claimed this task.Feb 13 2023, 6:27 PM

Sgs changed the task status from Open to In Progress.Feb 14 2023, 6:42 PM

Sgs moved this task from Ready for Development to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.

Change 889505 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: show the task description skeleton while requesting the PCS

https://gerrit.wikimedia.org/r/889505

Change 889526 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: avoid showing the pageviews skeleton

https://gerrit.wikimedia.org/r/889526

Issue 1. The 'success' message and post-edit dialog takes very long to load on slow connections.

There's indeed an optimization we can do here as already mentioned in T293316#7471066. We can show the success message and open the drawer before having requested the tasks to the API. However that would leave us with a pretty empty panel since we wouldn't be able to render the amount of suggestions found "1 of 123 suggestions", neither the page title or task type. A different option could be to show the success message as soon as the edit is saved and after display the panel (with or without data). But I think we might come already from that status quo? What do you think we should do? @RHo @kostajh

Issue 2. The current 'skeleton'; is not rendering correctly:
2a. The image thumbnail skeleton goes blank/white for a couple of secs before loading

I think this loading bottleneck is restricted to the image of the first card, for the rest we preload them and I cannot perceive the blank gap. I'm not sure we can do much about it since that's how the browser processes the image loading. All I can think of is some CSS/HTML tricks to keep a gray background or the existing placeholder and stack the image on top. Ideas welcome.

2b. The wikidata description grey box is in the wrong location (not actually covering where the text appears when loaded.

What's happening is we're failing to show the skeleton for the page description (solved in 889505) while we're requesting the page content service and we're wrongly showing the skeleton for the pageviews data content (solved in 889526).

More findings: some confusing thing is we're indeed requesting pageviews data to the AQS even if we know we're not gonna display it. I can't tell if this is some kind of optimization or an undesired side effect of how the code was written since the SmallTaskCard is also used on the mobile homepage. I haven't found the original requirement that describes if the pageviews should show in the mobile overlay preview but my guess is they should and that's why we have support for it in the code and because of the bug report in T291510: [betalabs]Post-edit dialog: mw-ge-small-task-card-metadata-container attempts to load pageviews info and T263611: [wmf.10] mobile - mw-ge-small-task-card-pageviews skeleton persistently displayed in post-edit dialog . If so, we have another bug in production since we're not showing the number:

es.wikipedia.org

Screenshot 2023-02-15 at 11.23.27.png (508×1 px, 55 KB)

Homepage mobile summary task card not showing pageviews skeleton even if requesting the data

Screenshot 2023-02-15 at 11.20.43.png (530×1 px, 83 KB)

Homepage mobile summary task card not showing pageviews data even if requesting it

It would be nice to clarify this and fix the possible bug as part of this issue, even if we file a subtask for it. cc @RHo @KStoller-WMF @Etonkovidova

Sgs moved this task from In Progress to Blocked / Needs work on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 15 2023, 11:30 AM

Sgs added a subscriber: Etonkovidova.Feb 15 2023, 11:34 AM

Sgs attached a referenced file: F36845485: Screenshot 2023-02-15 at 11.20.43.png. (Show Details)Feb 15 2023, 4:46 PM

Sgs attached a referenced file: F36845482: Screenshot 2023-02-15 at 11.23.27.png. (Show Details)

@Sgs Based on Newcomer homepage Figma designs, I don't think the page view data is supposed to display on the homepage summary task card.

Currently most work is triggered by the postEdit JS hook, which is not a particularly helpful hook: sometimes it is triggered after the page has been reloaded, sometimes just before it reloads. Sometimes there is no reload at all (VE just replaces the editing interface with the saved content it fetches via API). So in theory we can preload most of the information the postedit panel is delayed on, e.g. have it ride the VE save API response, but then it might only be needed by the next response and we'd have to stash it in session storage. Also we'd have to account for the fact that some of the data comes from the server, some (PCS and the image thumbnail content, and possibly AQS) is fetched directly by the client; and that if we generate the data pre-save, the user's edit stats will be off by one.

All that is doable; do we think it is worth the effort?

Sgs moved this task from Blocked / Needs work to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 16 2023, 3:18 PM

Hi @Sgs - so I think my proposed solution is matches yours in that I think we should try to show the success message immediately while the post edit dialog is loading.
This would involve having a better skeleton state than the current behaviour for the post edit dialog, which I am more open to being different if there are issues with rendering more of the content than th proposed mock. To answer your second question, the pageviews is not meant to be shown here.

In T294835#8627964, @RHo wrote:

Hi @Sgs - so I think my proposed solution is matches yours in that I think we should try to show the success message immediately while the post edit dialog is loading.
This would involve having a better skeleton state than the current behaviour for the post edit dialog, which I am more open to being different if there are issues with rendering more of the content than th proposed mock.

Ack. I'll work on this. For the loading state we can add another skeleton for the title and display a text Loading suggestions... for the suggestion counter. For the task type I'm not sure about a right-aligned skeleton, your feedback is welcome. Also related with comment below.

To answer your second question, the pageviews is not meant to be shown here.

If that's the case, I don't think the pageviews are shown in any usage of the "small card" widget. Are they? We could left align the task type and display a standard skeleton for it. (The bug description for the pageviews skeleton would become a feature :)

Sgs mentioned this in T317819: [minor] Non-structured task articles - post-edit dialog "You've published an edit! " message requires scrolling up.Feb 20 2023, 7:22 PM

In T294835#8630580, @Sgs wrote:

In T294835#8627964, @RHo wrote:

Hi @Sgs - so I think my proposed solution is matches yours in that I think we should try to show the success message immediately while the post edit dialog is loading.
This would involve having a better skeleton state than the current behaviour for the post edit dialog, which I am more open to being different if there are issues with rendering more of the content than th proposed mock.

Ack. I'll work on this. For the loading state we can add another skeleton for the title and display a text Loading suggestions... for the suggestion counter. For the task type I'm not sure about a right-aligned skeleton, your feedback is welcome. Also related with comment below.

OK cool, I've updated the mock and figma to show skeleton for the task type in full-width of the text area (along with the title text). And suggest the proposed text can be the shorter Loading... as well. Hope that helps!

To answer your second question, the pageviews is not meant to be shown here.

If that's the case, I don't think the pageviews are shown in any usage of the "small card" widget. Are they? We could left align the task type and display a standard skeleton for it. (The bug description for the pageviews skeleton would become a feature :)

SGTM :)

Tgr moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 23 2023, 3:45 AM

Change 889505 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: show the task description skeleton while requesting the PCS

https://gerrit.wikimedia.org/r/889505

Change 889526 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: avoid showing the pageviews skeleton

https://gerrit.wikimedia.org/r/889526

Maintenance_bot removed a project: Patch-For-Review.Feb 23 2023, 4:10 AM

Sgs moved this task from QA to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 23 2023, 11:53 AM

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.25; 2023-02-27).Feb 23 2023, 12:00 PM

Change 891607 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: show the pageviews in desktop

https://gerrit.wikimedia.org/r/891607

Change 891608 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks store: mark null properties for failed requests to PCS and AQS

https://gerrit.wikimedia.org/r/891608

Change 891609 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: do not wait for tasks request to show the panel

https://gerrit.wikimedia.org/r/891609

Testing notes

Reminder:

Page views are expected to be shown in desktop, not in mobile as per requirements T245790: Newcomer tasks: post-edit dialog. Solved as part of this issue in gerrit 891607

Scenarios:

Common loading scenario


Edit is successfully saved and the panel shows up, tasks are being fetched in the background	Tasks have been fetched, thumbnail, description and pageviews are being fetched from PCS and AQS	PCS and AQS data is received, all task data is shown

Fetch tasks API failure


Edit is successfully saved and the panel shows up, tasks are being fetched in the background	API call fails

PCS request failure


Edit is successfully saved and the panel shows up, tasks are being fetched in the background	Tasks have been fetched, thumbnail, description and pageviews are being fetched from PCS and AQS	PCS fails AQS suceeds

AQS request failure


Edit is successfully saved and the panel shows up, tasks are being fetched in the background	Tasks have been fetched, thumbnail, description and pageviews are being fetched from PCS and AQS	PCS suceeds and AQS fails

Change 891607 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: show the pageviews in desktop

https://gerrit.wikimedia.org/r/891607

Change 891608 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks store: mark null properties for failed requests to PCS and AQS

https://gerrit.wikimedia.org/r/891608

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.26; 2023-03-06); removed MW-1.40-notes (1.40.0-wmf.25; 2023-02-27).Feb 28 2023, 2:00 PM

Change 896332 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: extract the fallback card construction to a separate method

https://gerrit.wikimedia.org/r/896332

Change 896332 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: extract the fallback card construction to a separate method

https://gerrit.wikimedia.org/r/896332

Change 891609 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Post edit panel: do not wait for tasks request to show the panel

https://gerrit.wikimedia.org/r/891609

Maintenance_bot removed a project: Patch-For-Review.Mar 12 2023, 10:10 PM

Tgr moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 12 2023, 10:29 PM

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.27; 2023-03-13); removed MW-1.40-notes (1.40.0-wmf.26; 2023-03-06).Mar 12 2023, 11:00 PM

Checked on testwiki wmf.1 - works as expected. Thx, @Sgs for the detailed screnshots!

Some examples of loading states:

Screen Shot 2023-03-24 at 3.18.33 PM.png (1×1 px, 527 KB)

Screen Shot 2023-03-24 at 3.24.31 PM.png (1×1 px, 665 KB)

mobile:

Screen Shot 2023-03-24 at 3.17.23 PM.png (1×728 px, 247 KB)

Screen Shot 2023-03-24 at 3.02.18 PM.png (662×742 px, 58 KB)

	F36926264: Screen Shot 2023-03-24 at 3.02.18 PM.png
	Mar 24 2023, 10:26 PM

	F36926262: Screen Shot 2023-03-24 at 3.17.23 PM.png
	Mar 24 2023, 10:26 PM

	F36926270: Screen Shot 2023-03-24 at 3.24.31 PM.png
	Mar 24 2023, 10:26 PM

	F36926257: Screen Shot 2023-03-24 at 3.18.33 PM.png
	Mar 24 2023, 10:26 PM

	F36867060: Screenshot 2023-02-23 at 20.43.04.png
	Feb 23 2023, 7:46 PM

	F36867057: Screenshot 2023-02-23 at 20.39.27.png
	Feb 23 2023, 7:46 PM

	F36867050: Screenshot 2023-02-23 at 20.35.38.png
	Feb 23 2023, 7:46 PM

	F36867036: Screenshot 2023-02-23 at 19.50.20.png
	Feb 23 2023, 7:46 PM

Positive reinforcement: Revise skeleton state and behaviour of the Post-edit dialogClosed, ResolvedPublicActions