Avoid sidebar flickering when loading the page

Hey @ckrina, do you mean that we should have the default state be closed for now?

If so, I tackled this in a separate issue (now on the 1.x branch) so I think we can close this one?

During the meeting today, we talked with Sascha from Gin. They handle this using a combination of localStorage and JS that isn't dependent on DrupalBehaviors. We can go this route.

Cool, I'll start working on this! I'll revert back to a default open state and use localStorage outside of behaviours.

Hey @mherchel or @ckrina, I'm looking for some guidance on this one. I've added drupal behaviours, moved the initial localStorage check outside of the behaviours and I'm still seeing the flash. Any suggestions?

OK. I played around with this a bit, and there are a couple things:

1. We need to make sure we disable the width transition until everything is loaded.
2. Even when we do that, we still get jank
3. We can minimize the jank by splitting the following into its own JS file and library and loading it immediately, however there's still slight jank. And my guess is that it will be worse when aggregation is enabled and this file is combined with others.
   

   if (localStorage.getItem('sidebarState') === 'expanded') {
       document.documentElement.classList.add('navigation-active');
     }

4. We can totally remove the jank by adding the following to the bottom of the navigation.html.twig template
   

   <script>
       if (localStorage.getItem('sidebarState') === 'expanded') {
         document.documentElement.classList.add('navigation-active');
       }
     </script>
     

   However, not sure how the framework managers feel about this

Doing a little bit of research and I see that some inline JS was added to remove the current toolbar's flickering, so I'm guessing this is OK, but I'd still like to get a +1.

See #2998451: Toolbar tray rendering can result "flickering" resizing of content area to accommodate open trays

Inline JS is not ideal but we couldn't come up with anything better in #2998451: Toolbar tray rendering can result "flickering" resizing of content area to accommodate open trays 🤷‍♂️ Given that it's a pre-existing approach for the toolbar, I think we can assume this will be accepted in core.

The inline JS approach seems like the best (though we acknowledged not ideal) one. It was discovered after its implementation that comments within that JS do not work well in some aggregation scenarios, so be sure to avoid that in your solution.

Thanks for all the input everyone! I'll go with the inline JS.

Merged!