Page MenuHomePhabricator

Show progress/activity if a save request is still being processed
Closed, ResolvedPublic2 Story Points

Description

Motivation
As a Wikidata mobile editor
When I click on save
I want to see that something is happening even if the save has not succeeded yet

Mock

Acceptance Criteria

  • Once the request was sent, there is an indicator of progress as shown in the mock
  • The progress indicator in indeterminate
  • The progress indicator behaves as the OOUI one: https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ProgressBarWidget
    • instead of blue the moving part will show a cutout of the Wikidata logo The bar will be blue for a start as the logo should not be cropped and might not be the most suitable solution for wikibase instances anyways
    • the logo will always be 40% of the width of the total bar (proportions will change throughout different width as the heights always remains 20px)
  • If the save failed (i.e. the page mode stays in edit mode) or succeeded, the progress indicator disappears

Asset
svg of the Wikidata logo: https://commons.wikimedia.org/wiki/File:Wikidata-logo.svg

Notes
Maybe this could be done entirely in css. @Lucas_Werkmeister_WMDE created a demo a while ago.

Details

Related Gerrit Patches:
mediawiki/extensions/Wikibase : masterBump Termbox Pin
wikibase/termbox : masterShow IndeterminateProgressBar when saving
wikibase/termbox : masterIntroduce IndeterminateProgressBar

Event Timeline

Lea_WMDE updated the task description. (Show Details)May 29 2019, 2:43 PM
Lea_WMDE set the point value for this task to 2.
Lea_WMDE added a subscriber: Hanna_Petruschat_WMDE.
Pablo-WMDE updated the task description. (Show Details)May 29 2019, 3:45 PM
Pablo-WMDE added a subscriber: Lucas_Werkmeister_WMDE.
Hanna_Petruschat_WMDE removed the point value for this task.
Jakob_WMDE set the point value for this task to 2.Jul 3 2019, 3:46 PM
Jakob_WMDE added a subscriber: Jakob_WMDE.

Adding the story points back, as the latest changes to the description do not affect its complexity as far as I can tell.

Tarrow renamed this task from Show progress/activity if a save request is still being procesed to Show progress/activity if a save request is still being processed.Jul 15 2019, 8:46 AM
Tarrow edited projects, added Wikibase-Termbox-Iteration-20; removed Wikidata-Termbox.
Tarrow claimed this task.Jul 15 2019, 2:49 PM
Tarrow moved this task from To Do to Doing on the Wikibase-Termbox-Iteration-20 board.

Change 524022 had a related patch set uploaded (by Tarrow; owner: Tarrow):
[wikibase/termbox@master] Introduce IndeterminateProgressBar

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

Change 524188 had a related patch set uploaded (by Tarrow; owner: Tarrow):
[wikibase/termbox@master] Show IndeterminateProgressBar when saving

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

Love it.

IE11:

In integration with mw (FF):

Change 524541 had a related patch set uploaded (by Tarrow; owner: Tarrow):
[mediawiki/extensions/Wikibase@master] Bump Termbox Pin

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

Change 524022 merged by jenkins-bot:
[wikibase/termbox@master] Introduce IndeterminateProgressBar

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

Change 524188 merged by jenkins-bot:
[wikibase/termbox@master] Show IndeterminateProgressBar when saving

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

Change 524541 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Bump Termbox Pin

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

@Lea_WMDE removing the icon from the progress bar happened. This can be seen here: https://tools-static.wmflabs.org/wikibase-termbox-storybook/?path=/story/indeterminateprogressbar--default

Hidden question: What do you think about product-reviewing minor changes like this in the continuously deployed storybook instead of beta?

Lea_WMDE updated the task description. (Show Details)Jul 23 2019, 9:30 AM

Hey @Jakob_WMDE, thanks for the link! I checked beta and the storybook and it looks great to me! I think the storybook link works fine for me to see that you chose a blue (and if you want to have an intermediary check that is a great way to do it), but for acceptance testing I think I would feel more secure if I could look at the integrated version on beta, as this is as close to the user experience as we can get.

I took the following extra details from figma:

  • Height of the progress bar is always 20px
  • From the two examples it appeared to be as close as possible to horizontally and vertically centered so I did this
  • box-shadow is added
  • border colour is as specfied (#A2A9B1)

I took the following from OOUI:

  • Time of animation repeat is 2s
  • Start of animation is 'bar' totally out of view left
  • End of animation is totally out of view right

On beta, the loading bar is still in Wikidata colors. Could you update the code base @Tarrow ? Thanks!

@Lea_WMDE It should be on beta now :)

Lea_WMDE closed this task as Resolved.Jul 29 2019, 9:38 AM

Great, thanks @Tarrow !