Skip to content
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
wants to merge 12 commits into from

Conversation

g-saracca
Copy link
Contributor

@g-saracca g-saracca commented May 2, 2024

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

  1. Execute npm i.
  2. Navigate with cd packages/design-system && npm run build.
  3. Return with cd ../../.
  4. Ensure you have a .env file similar to .env.example, with the variable VITE_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.

lazy loaded module spinner

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.
LAZY - Build
Without lazy loading.
NO LAZY - Build

Collections page
Resources transfered reduced from 1.4MB to 1.1MB.

With lazy loading.
WITH LAZY - Collections Page

Without lazy loading.
NO LAZY - Collections Page

Create dataset page
Resources transfered reduced from 1.4MB to 944kb.

With lazy loading.
WITH LAZY - Create Dataset Page

Without lazy loading.
NO LAZY - Create Dataset Page

@g-saracca g-saracca marked this pull request as ready for review May 2, 2024 15:03
@g-saracca 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
@GPortas GPortas self-assigned this May 7, 2024
@GPortas
Copy link
Contributor

GPortas commented May 7, 2024

@GermanSaracca can you please resolve the merge conflicts?

@g-saracca
Copy link
Contributor Author

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.

@GPortas GPortas added the Waiting label May 7, 2024
@GPortas GPortas removed the Waiting label May 16, 2024
@coveralls
Copy link

coveralls commented May 16, 2024

Coverage Status

coverage: 97.814% (+0.005%) from 97.809%
when pulling 541c0e7 on feature/381-implement-lazy-loading
into d2789fc on develop.

@g-saracca g-saracca closed this Jun 7, 2024
@g-saracca
Copy link
Contributor Author

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement lazy loading
3 participants