Anyone here used lottieFiles for

[versed flicker]

You can't preload it in a header?
Like <link rel="preload" href="path-to-your-lottie-animation.json" as="fetch" crossorigin="anonymous">

You could also lazy load the other page content to try to get the animation done faster, and hide it until it's ready to display?

Long shot but state and loading spinner the element until the svg is ready?

[dawn rampart]

Oh hey, sorry I didn't spot the thread!

I'm still learning the app router. Previously I'd just use @next/head, now it's metaData constants in the layout file... but how do I add in a header link when the lottie component is in a react component file?

const Header = () => {
  ...
  return (
    <header className={styles.headerWrap}>
      <div className={styles.logoWrap}>
        <Image src={Logo} alt="logo" />
      </div>
      <div className={styles.mobileNav} ref={scope}>
        <Lottie
          lottieRef={burgerRef}
          loop={false}
          autoplay={false}
          animationData={Hamburger}
          onClick={handleClick}
          onEnterFrame={handleEnterFrame}
          className={styles.hamburger}
          priority="true"
        />
        <nav className={styles.navWrap} animate={isOpen ? "open" : "closed"}>
          <span>
            <hr className={styles.navLine} />
            <Link href={`/`} className={styles.navLink}>
              Websites
            </Link>
          </span>
          <span>
            <hr className={styles.navLine} />
            <Link href={`/`} className={styles.navLink}>
              Discord Bots
            </Link>
            <hr className={styles.navLine} />
          </span>
          <span>
            <Link href={`/`} className={styles.navLink}>
              About
            </Link>
            <hr className={styles.navLine} />
          </span>
          <section className={styles.mobContact}>
            <h3>something here</h3>
            <section>
              <p>email here</p>
              <p>more text</p>
            </section>
            <Link className={styles.mobBtn} href={`/`}>
              Let's Start A Project
            </Link>
          </section>
        </nav>
      </div>
    </header>
  );
};
export default Header;