Update/improve landing loading time

[noahk004]

Changes

• Images now update useRef object rather than state variable to track if they are loaded or not.
• Images are all brought in at the same time, making for a less choppy feel.
• Loading/progress bar animation

Notes

TDLR: using a single asset for landing page images that include the images and maybe even animations may be better for performance

Previously, a state variable was used to track whether the images had loaded in or not. Each image was rendered one by one, and when they had all loaded, the images would unblur and expand into the landing section. The issue was that the way images were being rendered in, the landing page seemed very choppy.

Initially, using a useRef object as well as making all images hidden until they were loaded in made the transition a lot smoother. Another problem came up though-- there was a big gap between when the user would enter the page and when the images would load in. So I opted to make a progress bar.

The way I see it, there are two options: 1) add the progress bar and make them smooth 2) no progress bar, faster images on screen but a little less smooth. A third option that I think would work pretty good would be to make a single asset that contains every image in the landing page as well as any of the desired animations. This might be a little over-the-top right now but may be a good future consideration.

[github-actions]

Deploy preview for irvinehacks-site-2025 ready!

Name	IrvineHacks Site
Preview	Visit Preview
Commit	5393bfe

[waalbert]

Another idea to reduce resource usage is to remove framer motion and use vanilla CSS animations if possible.

[noahk004]

@waalbert what components use framer-motion? Just the landing page assets and character selection?

[waalbert]

@waalbert what components use framer-motion? Just the landing page assets and character selection?

Just landing page for now, and the schedule page we can take a look at when we get to it later.