grafana/grafana

Improve Loading Indicator for Streaming

Open

#89415 opened on Jun 19, 2024

View on GitHub
 (7 comments) (1 reaction) (0 assignees)TypeScript (73,744 stars) (13,868 forks)batch import
area/frontendbeginner friendlyhelp wantedinternalteam/grafana-dashboards

Description

Currently, when performing streaming queries, the graph displays a green circle indicating that it's still loading. While this provides a visual cue, I believe the user experience could be enhanced by changing the loading indicator from a static green circle to a pulsating button. A pulsating button would be more noticeable and provide a clearer indication that the system is actively processing the query.

Proposed Solution:

  • Replace the static green circle loading indicator with a pulsating button.
  • Ensure the pulsating effect is subtle yet noticeable, without being distracting.
  • Maintain consistency in the design language and ensure the new indicator fits well with the overall UI aesthetics.

Benefits:

  • Improved user experience by providing a more dynamic and noticeable loading indicator.
  • Clearer visual feedback for users, reducing uncertainty about whether the system is still processing the query.

image

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsCSS animations
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Search the Grafana codebase for components related to streaming query loading indicators, likely under public/app/. Find the current green circle implementation (possibly an SVG or styled component). Replace it with a pulsating button using CSS keyframes for animation. Ensure the animation is subtle and fits the existing design system. Test the change locally with a streaming query.