search

lookbook-hq / lookbook

A UI development environment for Ruby on Rails apps ✨
https://lookbook.build
MIT License
912 stars 94 forks source link

Improve responsiveness of UI when navigating #617

Closed allmarkedup closed 6 months ago

allmarkedup commented 6 months ago

Implements a smarter rendering strategy to reduce the amount of HTML sent over the wire when requesting DOM updates.

DOM update responses triggered by navigation requests no longer include re-rendered navigation trees (which can be sizable and slow to render in larger projects) which also means the client-side DOM morphing should be snappier too.

Layouts are also stripped from all Ajax-triggered requests for updated page HTML to further reduce the payload.

netlify[bot] commented 6 months ago

Deploy Preview for lookbook-docs canceled.

Name Link
Latest commit 33b175b8c0914f7fa72c80edb26a0f695811f841
Latest deploy log https://app.netlify.com/sites/lookbook-docs/deploys/664d12cd3f5c270008366657
allmarkedup commented 6 months ago

@camertron your icon sprite PR got me thinking about the size of the sidebar nav trees in big projects and the performance implications of re-rendering them (and sending all the HTML down the wire) on each navigation event, which is actually completely unnecessary as it won't have changed (it only needs updating when file changes are detected).

I'm going to do a bit more testing but I'm hoping that this will make a noticeable improvement in response times when browsing between different previews/pages in the UI.

allmarkedup commented 6 months ago

I usually just fumble around in there until I find the thing that sort of resembles the thing I want to change, then pull out a rusty screwdriver and sort of bang on it until it half works

@camertron Sounds remarkably like my development strategy 😂 And I certainly don't blame you, it's a bit of a mess in there... I'm working on a big cleanup to hopefully make the codebase a little more sane/approachable to others so maybe one day it will be less terrifying to make changes :)

No worries about the review, I was really just tagging you so you were aware of it. I'm going to merge it now and get a new release out with this and the icon change.

If/when you update Primer to the new version I'd be interested to hear if you think it's made any difference.

camertron commented 5 months ago

it's a bit of a mess in there

I think Lookbook is actually remarkably well-organized and well-written, I'm just personally not very familiar with the internals, or with Alpine 😄

If/when you update Primer to the new version I'd be interested to hear if you think it's made any difference.

Me too! Will report back.