Implement skeleton loader for PageSpeed Insights widget

[felixarntz]

Follow up to #4878: Once the layout shifts have been addressed, we should change the loader to be more of a skeleton of the real PageSpeed Insights widget UI.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The PageSpeed Insights widget loading UI should be changed so that it is no longer a progress bar, but a similar preview block UI as is used for other widgets. The placement of the preview blocks should match what both of the field and lab tabs look like.
• It is critical that the box retains exactly the same height as the loaded widget.

Before merging a PR for this, please request an additional merge review from @felixarntz and @marrrmarrr.

Implementation Brief

• Create assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeedLoading.js which exports the DashboardPageSpeedLoading functional component.
  • The component should render the HTML structure below:
    • header#googlesitekit-pagespeed-header
      • div.googlesitekit-pagespeed-widget__data-src-tabs
        • Should render the PreviewBlocks component, with the width and height props set to 106x48 and count set to 3
      • div.googlesitekit-pagespeed-widget__device-size-tab-bar-wrapper
        • Should render the PreviewBlock component with the width and height set to 112x32
    • section
      • Should render the PreviewBlocks component with the width and height set to 100% and 78px and count set to 5
      • Render another set of PreviewBlocks (for the accordion) with the width set to 100% and height set to 45px. count should be set to 5.
    • div.googlesitekit-pagespeed-report__footer
      • Render 2 individual PreviewBlock with the width set to 96px and height set to 20px.
  • Since we need to cater for different widths/height across breakpoints, it'll be good to enhance PreviewBlocks by adding the following props, which should be passed to PreviewBlock:
    • smallWidth: PropTypes.string
    • smallHeight: PropTypes.string
    • tabletWidth: PropTypes.string
    • tabletHeight: PropTypes.string
    • desktopWidth: PropTypes.string
    • desktopHeight: PropTypes.string
• The dimensions in the IB are indicative only and should be tweaked to match the loaded widgets as closely as possible across all breakpoints. Hence the reason to enhance PreviewBlocks to support different dimensions per breakpoints.
• Add styles to replicate the same spacing we have within the loaded widget.
• Using assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeed.js,
  • Instead of rendering the ProgressBar component, render DashboardPageSpeedLoading.

Test Coverage

• No new tests to be added.

QA Brief

Changelog entry

[felixarntz]

cc @aaemnnosttv

[asvinb]

@eclarke1 @FlicHollis Just a note that this is blocked until #4878 is finalized. The IB is almost done and just waiting for #4878 to be finalized.

[tofumatt]

Looks good to me 👍🏻

IB ✅

[FlicHollis]

Hi @techanvil following out chat in Slack that this fix should be easy for anyone to pick up, I will unassign Asvin so it is available, thanks!

[techanvil]

Have moved to MR for an additional merge review from @felixarntz and @marrrmarrr as per the AC.

[mohitwp]

QA Update ✅

• Verified on dev.
• The PageSpeed Insights widget loading UI should be changed to a similar preview block UI as is used for other widgets,
• Verified on both main and entity dashboard.
• Verified box retains exactly the same height as the loaded widget.