Defer @mui/x-date-pickers off critical path (-123 KB gzip from first load)#1943
Open
KevinWu098 wants to merge 1 commit into
Open
Defer @mui/x-date-pickers off critical path (-123 KB gzip from first load)#1943KevinWu098 wants to merge 1 commit into
KevinWu098 wants to merge 1 commit into
Conversation
Contributor
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
…load) - Move LocalizationProvider from top-level app wrapper to LabeledTimePicker (scopes it to the only consumer) - Dynamic-import StartTimeField/EndTimeField via next/dynamic in AdvancedSearch (chunk only loads when user opens the collapsed accordion) - Add mounted state to avoid loading time picker chunk until accordion is first expanded - Uses same patterns already established in codebase (next/dynamic for GradesPopoverChart, React.lazy for Map) Co-Authored-By: Kevin Wu <kevinwu098@gmail.com>
devin-ai-integration
Bot
force-pushed
the
devin/1782444710-lazy-load-date-pickers
branch
from
f16c85b to
b104dd1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@mui/x-date-pickers(401 KB min / 123 KB gzip) was loaded eagerly on every page load despite only being used in the time picker fields inside the collapsed Advanced Search accordion.Changes:
client.tsx— RemovedLocalizationProvider+AdapterDateFnsfrom the top-level app wrapper (no longer wraps entire component tree)LabeledTimePicker.tsx— AddedLocalizationProviderat component level, scoping it to the only consumer (DesktopTimePicker)AdvancedSearch.tsx— Dynamic-importStartTimeField/EndTimeFieldvianext/dynamicwithssr: falseand Skeleton loading placeholders. Addedmountedstate so the chunk only loads when the accordion is first expanded.Result: The 123 KB gzipped
@mui/x-date-pickerschunk is deferred off the critical path — it only loads when a user opens "Advanced Search Options". Uses the samenext/dynamicpattern already established forGradesPopoverChart(recharts) andReact.lazyfor the Map component.Test Plan
pnpm lintpasses (0 warnings, 0 errors)Issues
N/A — optimization only
Link to Devin session: https://app.devin.ai/sessions/5e142a4c56a043ea9003ad17c4c2c241
Requested by: @KevinWu098