Stats: Create Placeholder Component

[timmyc]

Currently the markup for rendering placeholder/skeleton loading indicators is scattered throughout all stats components. This branch aims to centralize all of that markup/scss into one central location, and to fix some behaviors around it.

To Test
The best way to test the placeholders is to empty your localStorage on the Insights page, and a year view of a site stats page. Refresh the pages on empty local storage and ensure everything still has pulsing loading indicators, and after 2s the spinners should appear.

To Do

• Decrease time to show spinners fixes Stats: Reduce Spinner Display Time #2488
• Move logic of displaying placeholders out of css into component

/cc @alternatekev and @jancavan for thoughts

[jblz]

Code refactor all looks good to me.

When I test using the instructions, though, I only see the placeholders flash on for a split-second & no spinners at all.

Here's a video:
https://cloudup.com/c2umZtLAZtU

That TypeError is an existing issue here that I'm working on in #2459

[jancavan]

In all stats modules, the placeholder pulsing skeletons are replaced after six seconds by a spinner. Lets reduce the spinner display time to 3 seconds instead.

I tested this branch and the spinner and skeletons both show up at the same time?

Is there a reason why we show 2 different preloaders consecutively? I think we should just show one or the other - at least for all the modules, except for the bar chart which can retain the spinner.

[timmyc]

I believe the history behind the spinner was some stats modules were so slow to load ( like the chart on long periods ) that the spinner would be shown after the 6 seconds. The skeleton and spinner are shown at the same time on production right now.

The only ( planned ) behavior change in this branch is to show the spinner sooner that it currently happens in production.

From my testing, the branch behaves like production does, but I could have just been staring at it too long today.

[jancavan]

Yeah, probably out of scope for this cleanup. But I can confirm that the spinner shows up ~2 sec after the skeleton 👍

[timmyc]

@jancavan so good to 🚢 this? @jblz any other feedback?

[jancavan]

@timmyc 👍 I'll just create a different issue for the double spinners preloaders.

[jblz]

Marking this ready to go as I'm seeing a similar effect w/ empty localStorage on other branches.