Maniphest T209672

Show loading indicator when fetching a new version of the image
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	• Prtksxna
	Nov 16 2018, 5:29 AM

Description

Value proposition

As a user, I would like to be informed whether the image preview fetch is in progress, especially in case of complex images where it may take longer, so I am aware that the tool is working as expected and that I need to wait for the preview to show up.

Proposed solution

Add an indeterminate progress bar below the image while it updates. Adding anything on top of the image might obscure part of what the person is translating. The progress bar is displayed from the moment the translation data is sent to the server for generating the PNG. The progress bar animation is stopped as soon as the preview renders.
Add cursor:wait to the image while the image preview is being generated.

Design

https://codepen.io/anon/pen/WYoVNy

Related Objects

Mentioned In: rGSVT06a711545b40: Keep image loading indicator until Leaflet load event
rGSVT409f0907a414: Show animated bar while loading image
rGSVTbe62658d8da5: Show animated bar while loading image
rGSVTa7f47e51f036: Show animated bar while loading image
rGSVTf7cc44f5c303: Show animated bar while loading image
T207203: Image preview functionality

Event Timeline

• Prtksxna created this task.Nov 16 2018, 5:29 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 16 2018, 5:29 AM

• Prtksxna mentioned this in T207203: Image preview functionality.Nov 16 2018, 5:29 AM

@Prtksxna Thanks for creating this. I will hold off on prioritizing this until the Preview ticket is complete and we have a sense of how fast/slow the feature is.

The preview is indeed slow and this will help. Will prioritize this ticket for estimation.

• Niharika updated the task description. (Show Details)Jan 15 2019, 6:37 AM

• Niharika moved this task from Product backlog to Needs Discussion on the Community-Tech board.

Looks great. Will work much the same if we move to a box-o-leaflet as well.

Is it still a done thing to put cursor: wait on the image?

In T209672#4881148, @Samwilson wrote:

Looks great. Will work much the same if we move to a box-o-leaflet as well.

Is it still a done thing to put cursor: wait on the image?

Good idea! I'll add that to this ticket.

• Niharika updated the task description. (Show Details)Jan 15 2019, 3:49 PM

• Niharika set the point value for this task to 1.Feb 7 2019, 12:34 AM

• Niharika moved this task from Needs Discussion to Up Next on the Community-Tech board.

• Niharika added a project: Community-Tech-Sprint.Feb 15 2019, 9:36 PM

• Niharika moved this task from Up Next to In Sprint 🏃‍♀️🏃‍♂️ on the Community-Tech board.

Samwilson mentioned this in rGSVTf7cc44f5c303: Show animated bar while loading image.Feb 28 2019, 12:32 PM

Samwilson mentioned this in rGSVTa7f47e51f036: Show animated bar while loading image.Feb 28 2019, 12:48 PM

(Sorry, I know I'm working on this out of order, but I'm on a train and it seemed quick.)

PR: https://github.com/wikimedia/svgtranslate/pull/78

Samwilson mentioned this in rGSVTbe62658d8da5: Show animated bar while loading image.Mar 1 2019, 2:27 AM

Samwilson mentioned this in rGSVT409f0907a414: Show animated bar while loading image.Mar 1 2019, 4:21 AM

Merged. This is now live on the staging site and ready for QA.

@Samwilson Previews are broken on the staging site and I think this feature caused it. I don't see the loading indicator either.

The entire staging site was broken (because I broke it). None of the right asset files were loading. I've fixed that and this feature seems to be working.

Okay, I tested this again and I can't get it to work every time. It works sometimes though and I'm not sure what's the cause.
Steps to reproduce:

Go to https://tools.wmflabs.org/svgtranslate-test/File:Rsvg_text_rendering_test_2.svg
Select a To language
Enter text in label 1, press Tab, enter text in label 2, press Tab, enter text in label 3.

Expected outcome: Every time a new preview is generated, a loading indicator is seen.
Actual outcome: No loading indicator is seen.

It is possible that for this file the preview is generated really quickly and that's why I don't see it. If that's the case, let's put this in production so I can test with bigger files. It doesn't seem to cause anything to break.

You're correct, it's loading too quickly for the progress indicator to show. With a larger image it does show.

However, there's a bug I think: the indicator is removed after the response is received from the server rather than after the new image is loaded. The response contains the URL of the new image. I'll modify it to not remove the loading indicator until later on.

Samwilson mentioned this in rGSVT06a711545b40: Keep image loading indicator until Leaflet load event.Mar 5 2019, 5:48 AM

PR for the extended loading time: https://github.com/wikimedia/svgtranslate/pull/85

Merged and now live on the staging site. Ready for QA.

@Samwilson Looks good to me. Let's get this on production.

• Niharika moved this task from QA to Q3 2018-19 on the Community-Tech-Sprint board.Mar 6 2019, 6:27 PM

• Niharika moved this task from Backlog to Done on the SVG Translate Tool board.Mar 6 2019, 6:35 PM

This has been included in version 0.4.0 and is now in production.

Show loading indicator when fetching a new version of the imageClosed, ResolvedPublic1 Estimated Story PointsActions