Page MenuHomePhabricator
Create Task
Maniphest T222890

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

Assigned To
Tarrow
Authored By
• Lea_WMDE
May 9 2019, 2:21 PM
Tags
Referenced Files
F29812246: VirtualBox_IE11 - Win7_19_07_2019_13_47_56.png
Jul 19 2019, 12:15 PM
F29812275: Bildschirmfoto von 2019-07-19 14-13-49.png
Jul 19 2019, 12:15 PM
F29271232: Bildschirmfoto 2019-05-29 um 16.32.36.png
May 29 2019, 2:43 PM
F29270924: Bildschirmfoto 2019-05-29 um 14.49.17.png
May 29 2019, 12:52 PM
Subscribers
Aklapper
• Hanna_Petruschat_WMDE
Jakob_WMDE
• Lea_WMDE
Lucas_Werkmeister_WMDE
• Pablo-WMDE
Tarrow

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

Bildschirmfoto 2019-05-29 um 16.32.36.png (664×776 px, 81 KB)

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 Changes in Gerrit:
SubjectRepoBranchLines +/-
Bump Termbox Pinmediawiki/extensions/Wikibasemaster+1 -1
Show IndeterminateProgressBar when savingwikibase/termboxmaster+15 -9
Introduce IndeterminateProgressBarwikibase/termboxmaster+83 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Lea_WMDE created this task.May 9 2019, 2:21 PM
• Lea_WMDE edited parent tasks, added: T219886: Unhappy Editing Paths; removed: T222627: Handle situations of high latency between client and server.May 27 2019, 1:29 PM
• Lea_WMDE moved this task from Backlog to MVP tickets: In preparation on the Wikidata-Termbox board.May 29 2019, 12:49 PM
• Lea_WMDE updated the task description. (Show Details)May 29 2019, 12:52 PM
• 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 moved this task from MVP tickets: In preparation to MVP things: Ready for pickup on the Wikidata-Termbox board.
• 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 updated the task description. (Show Details)Jul 2 2019, 12:47 PM
• Hanna_Petruschat_WMDE removed the point value 2 for this task.
Jakob_WMDE set the point value for this task to 2.Jul 3 2019, 3:46 PM
Jakob_WMDE subscribed.

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.
gerritbot added a comment.Jul 18 2019, 10:29 AM

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

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

gerritbot added a project: Patch-For-Review.Jul 18 2019, 10:29 AM
gerritbot added a comment.Jul 18 2019, 10:52 AM

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

• Pablo-WMDE subscribed.Jul 19 2019, 12:15 PM

Love it.

IE11:

VirtualBox_IE11 - Win7_19_07_2019_13_47_56.png (979×1 px, 56 KB)

In integration with mw (FF):

Bildschirmfoto von 2019-07-19 14-13-49.png (1×1 px, 131 KB)

gerritbot added a comment.Jul 19 2019, 3:22 PM

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

gerritbot added a comment.Jul 19 2019, 3:26 PM

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

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

Tarrow mentioned this in rWBTBe10976f23545: Introduce IndeterminateProgressBar.Jul 19 2019, 3:26 PM
gerritbot added a comment.Jul 19 2019, 3:28 PM

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

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

Tarrow mentioned this in rWBTB1e7e804dced9: Show IndeterminateProgressBar when saving.Jul 19 2019, 3:28 PM
gerritbot added a comment.Jul 19 2019, 5:24 PM

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

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

Tarrow moved this task from Doing to Test (Product Review) on the Wikibase-Termbox-Iteration-20 board.Jul 19 2019, 5:37 PM
ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.15; 2019-07-23).Jul 19 2019, 6:00 PM
Maintenance_bot removed a project: Patch-For-Review.Jul 19 2019, 6:10 PM
Jakob_WMDE added a comment.Jul 22 2019, 1:19 PM

@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?

• Pablo-WMDE awarded a token.Jul 23 2019, 7:32 AM
• Lea_WMDE updated the task description. (Show Details)Jul 23 2019, 9:30 AM
• Lea_WMDE added a comment.Jul 23 2019, 9:35 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.

Tarrow added a comment.Jul 26 2019, 9:47 AM

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
• Lea_WMDE added a comment.Jul 26 2019, 10:05 AM

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

Tarrow added a comment.Jul 26 2019, 12:53 PM

@Lea_WMDE It should be on beta now :)

• Lea_WMDE closed this task as Resolved.Jul 29 2019, 9:38 AM
• Lea_WMDE moved this task from Test (Product Review) to Done on the Wikibase-Termbox-Iteration-20 board.

Great, thanks @Tarrow !

• Pablo-WMDE mentioned this in T232468: Illustrate loading.Dec 2 2019, 2:37 PM
• Pablo-WMDE mentioned this in rWBTB688675406fe1: IndeterminateProgressBar: fine tune shadow.Dec 4 2019, 2:05 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits