Fix: Implement lazy load lottie animations

[ahana4banerjee]

Description

With reference to issue #187, this PR optimizes animation asset loading by replacing static Lottie JSON imports with dynamic imports for on-demand loading.

Previously, the animation JSON files (spinner.json, success.json, and upload.json) were statically imported, causing them to be included in the initial application bundle even when the related UI components were not rendered immediately.

This update introduces lazy loading for animation assets to improve code-splitting behavior and reduce unnecessary eager loading during initial render.

---

Changes Made

Replaced Static Imports with Dynamic Imports

Removed static imports such as:

import spinnerAnim from "@/lib/lottie/spinner.json";

and replaced them with lazy-loaded imports using import() inside useEffect hooks.

---

Components Updated

ExportOverlay.tsx

• Lazily loads spinner.json
• Added lightweight fallback placeholder while animation loads

FileUpload.tsx

• Lazily loads upload.json
• Added loading fallback to avoid visual flicker

DownloadResult.tsx

• Lazily loads success.json
• Preserved smooth success animation rendering

---

Performance Improvements

On-Demand Animation Loading

Animation JSON files are now fetched only when their respective components mount instead of during the initial application load.

Improved Code Splitting

Verified that Lottie animation assets are now emitted as separate async chunks during production build.

Example verified from production output:

.next/static/chunks/389.*.js

containing:

spinner.json

This confirms the animation assets are no longer bundled into the initial application payload.

---

UX Considerations

To prevent visible loading flashes:

• added lightweight animated fallback placeholders
• preserved smooth animation rendering
• ensured no noticeable delay during animation appearance

---

Testing

Verified:

• all animations load correctly
• animations render without visible delay
• production build succeeds successfully
• async chunk generation works correctly
• lazy-loaded assets are separated from initial bundle flow

Tested on:

• local development server
• production build (bun run build)

This PR closes issue #187

[vercel]

@ahana4banerjee is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @ahana4banerjee!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

⚠️ PR Format Issues — @ahana4banerjee

Please fix the following before your PR can be reviewed:

• ⚠️ No linked issue found. Add Closes #<issue-number> to your PR description.

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md

[magic-peach]

Hey @ahana4banerjee! Thanks for the PR 🙏

One issue: this project uses Bun as the package manager, so package-lock.json should not be committed — it's the npm lockfile, not Bun's.

Fix:

1. Delete package-lock.json from your commit
2. If you added new dependencies, run bun add <package-name> to update bun.lock instead
3. Commit only the bun.lock changes (and package.json if changed)

git rm package-lock.json
git add bun.lock package.json  # if changed
git commit --amend --no-edit
git push --force-with-lease

Tagged: gssoc'26 needs-fixes

[ahana4banerjee]

@magic-peach Done! Please Check

[magic-peach]

@ahana4banerjee please resolve conflicts

[magic-peach]

Hey @ahana4banerjee! The build is failing with two ESLint errors. Here's exactly what to fix:

Error 1 — src/components/ExportOverlay.tsx:20:

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.  react-hooks/rules-of-hooks

Your useEffect is placed after an early return statement. React requires all hooks to be called before any conditional return.

Fix: Move the useEffect to before the if (!visible) return null (or whatever early return is on line ~18):

export function ExportOverlay({ visible, ... }) {
  // ALL hooks must come first
  useEffect(() => {
    // your effect
  }, [visible]);

  if (!visible) return null;  // early return AFTER hooks
  return <div>...</div>;
}

Error 2 — src/components/FileUpload.tsx:92:

Visible, non-interactive elements with click handlers must have at least one keyboard listener.
Avoid non-native interactive elements.

You have a <div onClick={...}> — divs aren't natively interactive, so you need to add keyboard support.

Fix: Either change the <div> to a <button>, or add role="button", tabIndex={0}, and an onKeyDown handler:

<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(); }}
>

Fix both and push — CI should pass. 🚀

[magic-peach]

Hi @ahana4banerjee 👋 This PR has a merge conflict with main. Please update your branch:

git fetch upstream && git merge upstream/main
# resolve any conflicts, then:
git push

Once conflicts are resolved and CI passes, this will be ready to merge. 🙂

[magic-peach]

Hey @ahana4banerjee! The build is failing with two ESLint errors:

1. React Hook called conditionally (line 20): useEffect or another hook is inside a conditional. React hooks must be called unconditionally at the top level of the component — not inside if statements, loops, or nested functions.

2. Missing keyboard handler on clickable element (line 92): A non-interactive element with an onClick handler needs keyboard accessibility — add onKeyDown (or use a <button> instead of a <div>).

3. Missing dependency wasm-feature-detect: This package is imported but not listed in package.json. Add it with bun add wasm-feature-detect.

Please fix these and push an update!

[magic-peach]

Hey @ahana4banerjee, this PR has merge conflicts with main. Please merge/rebase main into your branch and resolve the conflicts before we can review it. Run: git fetch upstream && git merge upstream/main

[magic-peach]

Hey @ahana4banerjee! The lazy lottie loading implementation looks great — dynamic import with a mounted check is exactly the right approach. However, this PR has merge conflicts with main that need to be resolved.

Since PR #513 (which also modified DownloadResult.tsx to add filename validation) was just merged, your branch now conflicts with the latest main. You'll need to rebase:

git fetch origin
git checkout fix/lazy-load-lottie
git rebase origin/main
# resolve conflicts in DownloadResult.tsx (keep both the filename editing AND your lazy lottie loading)
git push --force-with-lease

Once rebased and CI passes, this will be ready to merge!

[magic-peach]

Hey @ahana4banerjee! The build check is failing for this PR. Please review the build logs, fix the error, and push an update. Once the build passes and the code looks clean, this will be ready to merge. Let me know if you need help identifying the issue!

[magic-peach]

Hey @ahana4banerjee! Lazy-loading Lottie animations is a good performance optimization. This PR has several issues:

1. Merge conflicts with main
2. Build is failing
3. Lint is failing
4. Typecheck is failing

Please rebase and fix all three CI failures before this can be reviewed.

[magic-peach]

Hey @ahana4banerjee! This PR has CI check failures (build/lint/typecheck) and merge conflicts with main. Please:

1. Rebase onto main to resolve conflicts
2. Fix the build/lint/typecheck errors

git fetch origin
git rebase origin/main
# fix any errors, then:
git push --force-with-lease

Once all checks pass, we'll review and merge!

[magic-peach]

Hey @ahana4banerjee! This PR had merge conflicts with main — I've resolved them automatically and pushed. Conflicts were resolved by keeping main's versions of core files while preserving your changes. CI has been re-triggered. Once it passes, we'll review for merge!

[magic-peach]

Hey @ahana4banerjee! I've resolved the merge conflicts and pushed, but the build/lint/typecheck checks are still failing. Please check the build logs and fix the errors. The lazy-loading approach looks interesting — just needs the build issues resolved!

[magic-peach]

Hey @ahana4banerjee! The build was failing due to unresolved conflict markers. I've fixed the conflict resolution and pushed again — CI has been re-triggered. Once it passes, we'll review the lazy Lottie loading feature and merge!

[magic-peach]

Fixed again! The DownloadResult.tsx had duplicate import statements that caused the build to fail. I've cleaned this up and pushed (v3). CI should pass now. Once it does, we'll review the Lottie lazy-loading implementation!

[magic-peach]

@ahana4banerjee all checks are failing please check

[magic-peach]

Hey @ahana4banerjee! 👋

We've added a new requirement for all PRs: a screen recording showing your changes working on your local machine must be attached before a PR can be merged.

Please add a recording to this PR that shows:

1. bun run dev running at http://localhost:3000
2. The full working flow of your change (demonstrate the feature/fix end-to-end)
3. Any tests passing — if your change touches logic with tests, show bun run lint and bunx tsc --noEmit completing without errors in the terminal

How to record:

• macOS: Cmd + Shift + 5 → Record Selected Portion, or QuickTime Player
• Windows: Win + G → Xbox Game Bar → Capture
• Linux: OBS Studio, GNOME Screenshot, or kazam
• Any OS: Loom (free, easy to share)

Once you have the recording, drag the file directly into a comment on this PR, or paste a Loom link. This is now a hard requirement — see CONTRIBUTING.md for full details.

Thanks for contributing to Reframe! 🎬