Skip to content

Add Lookbook preview for lazy-loaded tab panels#66

Open
joshsadam wants to merge 3 commits into
mainfrom
tabs-lazy-prev-ew
Open

Add Lookbook preview for lazy-loaded tab panels#66
joshsadam wants to merge 3 commits into
mainfrom
tabs-lazy-prev-ew

Conversation

@joshsadam

@joshsadam joshsadam commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

What does this PR do and why?

Adds a new Lookbook preview that demonstrates lazy-loaded tab panels using Pathogen::Tabs#with_lazy_panel and Turbo Frames.

The preview shows a three-tab layout where the selected panel renders immediately and the other panels fetch mocked Turbo Frame responses when their tabs become visible. To support this without adding demo-only Rails routes, the Lookbook preview layout now boots MSW (Mock Service Worker) before Turbo starts. MSW intercepts requests to /lookbook-mocks/tabs/lazy-load/:panel and returns realistic frame HTML with a short artificial delay.

Changes include:

  • New Turbo Frame Lazy Load preview under Pathogen::Tabs
  • lookbook_mocks/tabs_lazy_load.js MSW handlers and lookbook_preview.js entry point
  • mockServiceWorker.js in demo/public/ for browser interception
  • MSW added as a dev dependency (package.json, pnpm-lock.yaml)
  • ESLint config updated to allow MSW imports in demo JavaScript
  • Minor copy updates in the Advanced Features preview

Screenshots or screen recordings

image

Requests:
image

How to set up and validate locally

  1. Update dependencies in root folder bin/setup
  2. cd demo & bin/dev
  3. Open http://localhost:3001/lookbook
  4. Navigate to Pathogen::Tabs → Turbo Frame Lazy Load
  5. Confirm the Summary tab content is visible on load
  6. Click Metrics and Timeline — each panel should show a brief loading state, then render mocked content with a green Loaded by MSW badge
  7. Optionally review Advanced Features for updated lazy-loading documentation copy

PR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

@joshsadam joshsadam self-assigned this Jun 8, 2026
@joshsadam joshsadam changed the title Add tab lazy load previews Add Lookbook preview for lazy-loaded tab panels Jun 8, 2026
@joshsadam joshsadam added dependency javascript Pull requests that update javascript code labels Jun 8, 2026
@joshsadam joshsadam force-pushed the tabs-lazy-prev-ew branch from f25e15f to 984fb1e Compare June 10, 2026 16:05
@joshsadam joshsadam requested a review from ericenns June 12, 2026 17:37
MSW intercepts Turbo Frame requests in the Lookbook preview
without adding demo-only Rails routes.
Lookbook previews now start MSW before Turbo boots so lazy tab
panels can fetch mocked frame responses without demo routes.
@joshsadam joshsadam force-pushed the tabs-lazy-prev-ew branch 2 times, most recently from cbed100 to 8f4d031 Compare June 17, 2026 11:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dependency javascript Pull requests that update javascript code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant