Use React.lazy() to lazily load NPM packages on the client

lazilyLoadedComponent.js

import React, { Suspense } from "react"
import hasMounted from "../hooks/useHasMounted"

const SomeNpmPackage = React.lazy(() => import("some-npm-package"))

function LazyLoadedComponent() {
  if (!hasMounted) return null

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <SomeNpmPackage />
    </Suspense>
  )
}

export default LazyLoadedComponent