Page load improvements

[liamcmitchell]

Main improvement is reducing the layout shift caused by the sidebar popping in on page load.

• Set sidebar state & width in inline_html.js
• Reduce sidebar state & animation classes from 6 to 2
• Remove redundant body selectors
• Add max width to drawer
• Refactor sidebar-drawer.js to reduce indirection and simplify logic
• Register sidebar size observer on mousedown to avoid recording non-user changes and triggering DOM updates
• Simplify sidebar animation sequence reducing DOM updates and callbacks
• Refactor theme.js
• Remove toast on browser theme change (it made the code cleaner and I thought it was OK to go)
• Change script tags to defer - this removes the need for onDocumentReady helper but I thought I would stop my refactoring here

My machine is too old to capture accurate video of page load so instead I'm showing page load recordings from Chrome devtools performance tab.

Before

Screen.Recording.2025-01-02.at.08.47.06.mov

After

Screen.Recording.2025-01-02.at.08.49.20.mov

Biggest layout shift is now 0.4 instead of 0.9, page loads a little faster, assets are a little smaller.

[josevalim]

This looks great @liamcmitchell! I found only one regression. On small screens, the hamburger for opening and closing the sidebar is moving with the page, instead of remaining static. You can see it it is out of place in the screenshot below:

If you scroll further, then it fully disappears!

[liamcmitchell]

Sorry, didn't check other stylesheets for the classes I removed.

Fixed this and a few other issues.

[josevalim]

💚 💙 💜 💛 ❤️