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.

Sign up for GitHub

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

Jump to bottom

[MDS-5609] Minespace Loading 🚄🏍🏎️💨🏁⚡ #2799

Merged
merged 16 commits into from
Nov 16, 2023
Merged

[MDS-5609] Minespace Loading 🚄🏍🏎️💨🏁⚡ #2799

merged 16 commits into from
Nov 16, 2023

Conversation

simensma-fresh
Copy link
Collaborator

@simensma-fresh simensma-fresh commented Nov 10, 2023 •
edited
Loading

Objective

MDS-5609

What?
Bunch of configuration and app tweaks to improve loading speed of minespace.

  • Got rid of the redirect that happens to check if a user is logged in
  • Lazy load PDF Viewer and leaflet only when needed
  • Applied code splitting based on different routes
  • Various import updates (lodash + antd icons, moment) to make sure they were tree shaked properly
  • Deploy source maps as separate files
  • Make sure webpack removes comments from built files
  • Make css non-render blocking
  • Bunch of different tweaks to make GTMetrix happy

Bundle analyzer

Before
image

After
image

TODO:

  • A bunch of cleanup
  • Apply these changes to core
  • Test out serving the frontend from S3 + Cloudfront instead of Openshift for things like improved caching and http/2

@simensma-fresh simensma-fresh changed the base branch from develop to hackathon November 10, 2023 00:09
@simensma-fresh simensma-fresh changed the base branch from hackathon to develop November 16, 2023 00:06
taraepp
taraepp reviewed Nov 16, 2023
View reviewed changes
services/minespace-web/src/components/common/Loading.js
return (
<div id="loading-screen">
<div id="loader">
<Lottie options={defaultOptions} />
<img src={LOADER} alt="Loading" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌
I will not miss the Lottie-related console errors!

taraepp
taraepp approved these changes Nov 16, 2023
View reviewed changes
Copy link
Collaborator

@taraepp taraepp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

matbusby-fw
matbusby-fw reviewed Nov 16, 2023
View reviewed changes
services/minespace-web/src/constants/routes.js
import IncidentSuccessPage from "@/components/pages/Incidents/IncidentSuccessPage";
import { UsersPage } from "@/components/pages/UsersPage";
const DamsPage = React.lazy(() => import("@common/components/tailings/dam/DamsPage"));
const InformationRequirementsTablePage = React.lazy(() =>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yay lazy loading!

matbusby-fw
matbusby-fw approved these changes Nov 16, 2023
View reviewed changes
Copy link
Collaborator

@matbusby-fw matbusby-fw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@simensma-fresh simensma-fresh merged commit 55f78bf into develop Nov 16, 2023
12 checks passed
@simensma-fresh simensma-fresh deleted the hack_bundle_size branch November 16, 2023 21:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@taraepp taraepp taraepp approved these changes

@matbusby-fw matbusby-fw matbusby-fw approved these changes

@henryoforeh-dev henryoforeh-dev henryoforeh-dev approved these changes

@isuru-aot isuru-aot Awaiting requested review from isuru-aot

@asinn134 asinn134 Awaiting requested review from asinn134

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@simensma-fresh @henryoforeh-dev @matbusby-fw @taraepp