Page MenuHomePhabricator

Newcomer tasks: Animate the "live broadcast" icon in the Suggested edits results overlay
Open, Needs TriagePublic

Description

User story
When using the tasks filter, I want some feedback when I change filter options that different articles are being found based on my selections.

Proposed solution
Animate the "live-broadcast" icon next to the count of article results to indicate that matching articles are being found.

See animated SVG here: http://reetssydney.github.io/prototypes/live-broadcast/index.html

Asset:

CSS:

@keyframes play45 {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -900px 0px;
  }
}
.shapeshifter {
  animation-duration: 3000ms;
  animation-timing-function: steps(45);
  animation-iteration-count:infinite;
  width: 20px;
  height: 20px;
  background-image: url(livebroadcast-anim.svg);
  background-repeat: no-repeat;
}
.shapeshifter.play {
  animation-name: play45;
}

Event Timeline

RHo updated the task description. (Show Details)Oct 29 2019, 10:27 PM
RHo updated the task description. (Show Details)Oct 30 2019, 10:49 AM
RHo removed a project: Growth Design.
kostajh removed kostajh as the assignee of this task.Nov 4 2019, 11:01 AM
MMiller_WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.
Tgr added a comment.Jan 18 2020, 1:43 AM

Is the goal here to animate the icon while the search is running in the background, or to animate it for a short time once the results have been updated, to draw attention to the new number? In the former case, should we also replace the old number with something indicating that we don't have the number yet?

@RHo -- pinging you on the above question.

RHo added a comment.Jan 22 2020, 3:19 PM

Is the goal here to animate the icon while the search is running in the background, or to animate it for a short time once the results have been updated, to draw attention to the new number? In the former case, should we also replace the old number with something indicating that we don't have the number yet?

Hi, it is both, and I had it show --- when the number was updating in one of the usertesting prototypes, but an ellipsis ... would look better if it is possible to show that when the number is not yet shown.

open to see animated gif (also note that the broadcast icon is not animated but it should be)