-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/381 implement lazy loading #394
Closed
Closed
Conversation
This file contains 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
g-saracca
added
Size: 3
A percentage of a sprint. 2.1 hours.
pm.GREI-d-2.7.1
NIH, yr2, aim7, task1: R&D UI modules for creating datasets and supporting publishing workflows
pm.GREI-d-2.7.2
NIH, yr2, aim7, task2: Implement UI modules for creating datasets and publishing workflows
SPA: Dataset page (View)
SPA: Collection Page
SPA: Dataverse page (View)
SPA: Create Dataset Form
SPA: File Upload Page
labels
May 2, 2024
@GermanSaracca can you please resolve the merge conflicts? |
Could we wait for merging this until we have fix e2e tests? I want to double check if this lazy loading of modules doesn't conflicts with any test. |
Closed for now, until we can find the time to analyze more closely why the Suspense fallbacks are showing up more than once and why it is affecting e2e test only on github actions not on our end. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
pm.GREI-d-2.7.1
NIH, yr2, aim7, task1: R&D UI modules for creating datasets and supporting publishing workflows
pm.GREI-d-2.7.2
NIH, yr2, aim7, task2: Implement UI modules for creating datasets and publishing workflows
Size: 3
A percentage of a sprint. 2.1 hours.
SPA: Collection Page
SPA: Create Dataset Form
SPA: Dataset page (View)
SPA: Dataverse page (View)
SPA: File Upload Page
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.
What this PR does / why we need it:
Implements lazy loading of pages in router.
To load only necessary/related js files for the current page.
Which issue(s) this PR closes:
Closes #381
Special notes for your reviewer:
Suggestions on how to test this:
Step 1: Run the Development Environment
npm i
.cd packages/design-system && npm run build
.cd ../../
..env
file similar to.env.example
, with the variableVITE_DATAVERSE_BACKEND_URL=http://localhost:8000
.Step 2: Run e2e and component tests and check everything keeps working as expected.
Step 3: The best way to test this is to test in beta environment once deployed.
Checking in the console the network traffic, specifically with the JS tab selected and confirm that only the necessary files are loaded.
I recommend opening each url of the app in a window in incognito mode to avoid caching and loading files belonging to chrome extensions or the browser used.
Does this PR introduce a user interface change? If mockups are available, please link/include them here:
Yes, a new Spinner component has been created in the design system. This Spinner works as a backup rendered element while the JS files are lazily loading. This spinner will only be visible the first time the files are loaded.
Is there a release notes update needed for this change?:
Additional documentation:
Lazy Loading implementation
Here are some screenshots of the load differences.
Screenshots of the application views were taken in an incognito window to avoid showing file loading from Chrome extensions and to avoid caching.
Each page was loaded at the specified url directly.
Building the app. 👇
With lazy loading.
Without lazy loading.
Collections page
Resources transfered reduced from 1.4MB to 1.1MB.
With lazy loading.
Without lazy loading.
Create dataset page
Resources transfered reduced from 1.4MB to 944kb.
With lazy loading.
Without lazy loading.