Automattic / Automattic/jetpack

AAG: add placeholder for cards that load external content

Open
#14,135 1 comment 0 reactions 0 assignees View on GitHub
[Focus] Performance [Pri] Normal [Status] Needs Design Admin Page Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

> After purchasing a backups plan and entering credentials, if I refresh the At A Glance page, the “Activity” card is slow to load and causes some reflow as it is added to the dom.
>
> My guess is that we’re likely waiting for an API call to return before we show the card. Can we either cache that API call so the reflow doesn’t happen each time or show a pulsing/loading state for the card while the API request is in flight?

https://videopress.com/v/ZdRoq8ox

Reported here: p8oabR-qW-p2#comment-3597

Contributor guide

Open the contributing guide

Research direction

Start by locating the At A Glance Activity card and the API request that loads its external content. Verify the refresh behavior, then add a loading placeholder or otherwise prevent the card from causing reflow while the request is in flight; done means the card has stable space before its content arrives.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.