Site Health: add visual placeholder for checks that are still loading

[johnjamesjacoby]

I love the Site Health feature, and I think it can improved in a few small ways to potentially impact user experience in one big way 💙

Right now, there is some helpful text that says "Results are still loading" and – when at least 1 recommendation can be made – another piece of text becomes a counter for the increasing number of possible Site improvements.

This is great to have, but in my experience, the longer running in-progress checks are easily overlooked because there is not a big obvious visual indicator that background processing is happening.

It wasn't until I started writing this description and looking for clues, that I zoomed in to see that the thin grey circle next to the top text (id: #site-health-progress) has animation connected to it. (I recall this previously had a percentage; I think it's OK that number is omitted.)

When a recommendation finishes, it appears in either the top list for "recommended improvements" or the bottom list for "items with no issues detected". This is where I have ideas for UX tweaks:

• "items with no issues detected" is hidden by default behind a button shaped toggle, so users are never presented with what work is being done
• "items with no issues detected" toggle state is not persistent between page refreshes (using a screen option) so curious users cannot opt-in to seeing progress
• longer running checks give the impression that checks have completed or the page may be stuck

---

In my imagination, a few things should happen in conjunction:

• Add visual placeholders for in-progress checks
  • perhaps as its own separate list with an item for each one, with a spinner where the open/close toggle is
    • maybe some new creative UI if there is visual noise from elements jumping around
• "items with no issues detected" should be open by default
  • when the user toggles it closed, it should stay closed until opened, etc..
  • "Screen Options" could be added to use an existing API (or something more Gutenbergy?)
• More explicit and intentional verbiage - are these checks, items, issues, recommendations, improvements, or tests?
  • Fewer words to give users less to read
  • Narrow the scope of these adjectives into a familiar Type/State/Status pattern?
• More precise counts & labels:
  • Simple: All (24) | Pending (2) | Running (5) | Finished (17)
  • Wordy: All (24) | Needs Attention (2) | In Progress (5) | Satisfactory (17)
• Checks should be dismissible so users can hide ones they are comfortable with
  • Screen Options to the rescue again!
  • Add "Dismissed (1)" to the above counts
• Save state of checks in a transient, run as cron every 24 hours
  • Add some text about "checks running periodically"
  • Allow this to be disabled with filters and/or multisite installs
  • Debounce for some number of seconds so navigating between "Status" and "Info" does not always rerun every check
  • Show a (2) count bubble in the admin menu
  • Send an email when new recommendations are discovered
  • Add some "Rerun" or "Check Now" button to flush the transient & run the job

---

I think these iterations change Site Health from being the very useful tool that it currently is (when discovered organically) to an interface that feels trustworthy and remarkable enough for users to feel compelled to take action on, and plugins & WordPress core to pull users into when issues come up.