Rework sidebar .ready class addition

- Remove the sidebar duplicate JS that would also add a ready class but NOT after a settimeout, only after the component renders
- This means we now have one location in the code that does this, driven by Stimulus
- Update the Storybook preview JS so that we can rely on similar behaviour in Storybook for transitions

client/src/components/Sidebar/Sidebar.stories.tsx

@@ -204,9 +204,6 @@ function renderSidebarStory(
     return Promise.resolve();
   };
 
-  // Add ready class to body to enable CSS transitions
-  document.body.classList.add('ready');
-
   const onExpandCollapse = (collapsed: boolean) => {
     if (collapsed) {
       document.body.classList.add('sidebar-collapsed');

client/src/components/Sidebar/index.tsx

@@ -51,7 +51,6 @@ export function initSidebar() {
       />,
       element,
       () => {
-        document.body.classList.add('ready');
         document
           .querySelector('[data-wagtail-sidebar]')
           ?.classList.remove('sidebar-loading');

client/storybook/preview.js

@@ -1,5 +1,6 @@
-import '../tests/stubs';
+import { domReady } from '../src/utils/domReady';
 
+import '../tests/stubs';
 import '../../wagtail/admin/static_src/wagtailadmin/scss/core.scss';
 import './preview.scss';
 
@@ -44,4 +45,10 @@ const loadIconSprite = () => {
     });
 };
 
+domReady().then(() => {
+  // Add ready class to body to enable CSS transitions
+  // Emulates what happens in Wagtail admin when initial content is loaded
+  document.body.classList.add('ready');
+});
+
 loadIconSprite();