Add skeleton loader to SK Summary widget

[aaemnnosttv]

Feature Description

The WP dashboard widget "Site Kit Summary" has no "skeleton" component while loading as many others do on the main SK dashboard. This results in a substantial shift between the page load and when the widget renders and loads.

---

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

Acceptance criteria

• The WP dashboard widget should be updated such that it loads with placeholder elements to hold the same space as it will occupy after loading successfully
  • The layout of placeholders should be dynamic based on which modules are connected (SC or SC+GA)
  • Placeholders should be sized with the assumption that data will load successfully and need not account for edge cases
• There should be little to no difference between the size of the widget between page load and rendered states

Implementation Brief

• [ ] Update includes/Core/Admin/Dashboard.php:

  • https://github.com/google/site-kit-wp/blob/c7620667ac71e8323359c461b93e6b6a6a8d04ab/includes/Core/Admin/Dashboard.php#L123-L136
  • Get instances of the Analytics_4 and Search_Console modules.
  • Check if Analytics module is active and connected using the modules methods.
  • Check if the current user has at least view access to Analytics only or both Analytics and Search Console data using current_user_can( Permissions::READ_SHARED_MODULE_DATA, $module ).
  • Update the classes added to the following div, for each active module if they are connected/based on the current users access to view each module: googlesitekit-wp-dashboard-loading googlesitekit-wp-dashboard-loading__analytics_active_and_connected googlesitekit-wp-dashboard-loading__can_view_analytics loading__can_view_search_console
  • https://github.com/google/site-kit-wp/blob/c7620667ac71e8323359c461b93e6b6a6a8d04ab/includes/Core/Admin/Dashboard.php#L134
  • Within the div render a number of divs with the class googlesitekit-preview-block containing a div with the googlesitekit-preview-block__wrapper class (The DOM of the PreviewBlock component), decide the number based on best match to the output of the final dashboard app.

• [ ] Update assets/sass/components/wp-dashboard/_googlesitekit-wp-dashboard.scss:

  • Style the preview blocks to display similar rows to the final rendered widget in each case.
  • Make sure googlesitekit-wp-dashboard-loading div and it's preview blocks match the exact height of the final returned widget based on:
    • The Analytics active and connected state.
    • The view only read shared permissions for the Analytics/Search Console module.

• [ ] Update the render function in assets/js/googlesitekit-wp-dashboard.js to remove existing dom elements from the render container before rending the WPDashboardApp.

  • https://github.com/google/site-kit-wp/blob/c7620667ac71e8323359c461b93e6b6a6a8d04ab/assets/js/googlesitekit-wp-dashboard.js#L44-L56

Test Coverage

• Update tests/phpunit/integration/Core/Admin/DashboardTest.php to test that the correct classes are rendered based on the key states above.

QA Brief

Changelog entry

[benbowler]

I looked at a JS approach first, however by using the Network speed throttling, the majority of the delay in loading is waiting for the React app to be loaded. This is why I implement a PHP/CSS implementation here.