Automattic / Automattic/jetpack

JetpackLoadingIcon component: no visual indication of loading status

Open
#22,281 0 comments 0 reactions 0 assignees View on GitHub
[Plugin] Jetpack Admin Page
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

**Issue:**

The `` [component](https://github.com/Automattic/jetpack/blob/74d7093905960d2e3b1d18eb9e3079c41add6d6e/projects/plugins/jetpack/_inc/client/components/jetpack-loading-icon/index.jsx) is used to show a static SVG graphic to indicate loading. While there is an alt text prop for the image, there is no visual indication that this component is loading/processing to a user which can be confusing if things are taking longer than average. The component as consumed by Recommendations:

https://github.com/Automattic/jetpack/blob/74d7093905960d2e3b1d18eb9e3079c41add6d6e/projects/plugins/jetpack/_inc/client/recommendations/index.jsx#L66-L76

**Expected:**

At the least I might expect the ability to pass a prop with some text such as "Loading..." which would be visually displayed. An animated loading image would be great, but it doesn't look like `JetpackLoadingIcon` is consumed widely so that seems overkill.

**Misc.**

Internal, reported via: p8oabR-LV-p2#comment-5840

Contributor guide

Open the contributing guide

Research direction

Start with projects/plugins/jetpack/_inc/client/components/jetpack-loading-icon/index.jsx, then inspect its use in projects/plugins/jetpack/_inc/client/recommendations/index.jsx#L66-L76. Confirm how the loading state is presented and verify that Recommendations visibly communicates loading to users without relying only on alt text.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.