feat: conditional loading of external page components

src/components/ui/APlayer.tsx

@@ -1,12 +1,11 @@
 "use client"
 
-import { APlayer as AplayerReact } from "aplayer-react"
 import "aplayer-react/dist/index.css"
 import { memo } from "react"
 
 import { toGateway } from "~/lib/ipfs-parser"
 
-const APlayer = memo(function APlayer({
+const APlayer = memo(async function APlayer({
   src,
   name,
   artist,
@@ -31,6 +30,8 @@ const APlayer = memo(function APlayer({
     name = name.replace(/^user-content-/, "")
   }
 
+  const { APlayer: AplayerReact } = await import("aplayer-react")
+
   return (
     <AplayerReact
       audio={{

src/components/ui/DPlayer.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { DPlayerProps, Player as RcDPlayer } from "rc-dplayer"
+import { type DPlayerProps } from "rc-dplayer"
 import { memo } from "react"
 import { ReactElement } from "rehype-react/lib"
 
 import { toGateway } from "~/lib/ipfs-parser"
 
-const DPlayer = memo(function DPlayer({
+const DPlayer = memo(async function DPlayer({
   src,
   children,
   ...props
@@ -29,6 +29,8 @@ const DPlayer = memo(function DPlayer({
 
   src = toGateway(src)
 
+  const { Player: RcDPlayer } = await import("rc-dplayer")
+
   return (
     <div className="my-8">
       <RcDPlayer src={src} {...props} />

src/components/ui/GithubRepo.tsx

@@ -1,5 +1,5 @@
-import { GithubRepo as ReactGithubRepo } from "@birdgg/react-github"
+export default async function GithubRepo({ repo }: { repo: string }) {
+  const { GithubRepo: ReactGithubRepo } = await import("@birdgg/react-github")
 
-export default function GithubRepo({ repo }: { repo: string }) {
   return <ReactGithubRepo repo={repo} />
 }

src/components/ui/Tweet.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image"
-import { Tweet as ReactTweet } from "react-tweet"
 import type { TweetComponents } from "react-tweet"
 
 const components: TweetComponents = {
@@ -7,7 +6,9 @@ const components: TweetComponents = {
   MediaImg: (props) => <Image {...props} fill unoptimized alt="tweet-media" />,
 }
 
-export default function Tweet({ id }: { id: string }) {
+export default async function Tweet({ id }: { id: string }) {
+  const { Tweet: ReactTweet } = await import("react-tweet")
+
   return (
     <div className="flex justify-center">
       <ReactTweet id={id} components={components} />