Slow Navigation between Pages in Next.js 14.1.2 with Lottie Animation

Question

I'm facing slow navigation issues in Next.js 14.1.2 while using Lottie animation. On switching between pages, there's significant delay and sometimes the application becomes unresponsive. For more details, refer to my GitHub project: https://github.com/MurtuzaTravadi/murtuza_travadi_new.git

This is my high level code animation.

// animation/page.js

import Lottie from "lottie-react";
import ManWorkingOnLaptop from "../files/Manworkingonalaptop.json";

const Animation = () => <Lottie animationData={ManWorkingOnLaptop} loop={true} />;

export { Animation };

This Navigation.js

import navStyles from './navigation.module.css'
import Link from 'next/link'

export function Navigation() {
    return (
        <nav className={navStyles.Nav}>
        <ul>
          <li>
            <Link href="/">hello.html</Link>
          </li>
          <li>
            <Link href="/sidebar">about.css</Link>
          </li>
          <li>
            <Link href="/">project.js</Link>
          </li>
        </ul>
      </nav>
    );
  }