danilowoz/react-content-loader displays a facebook-style skeleton loader. The gist handles color theme for dark and light mode switching when using Next js with useTheme() hook

react-content-loader-dark-mode-next.js

import React from 'react'
import ContentLoader from 'react-content-loader'
import { useTheme } from 'next-themes'

const SkeletonLoader = (props) => {
  const { theme, resolvedTheme } = useTheme()

  return (
    <div className="flex lg:md:justify-center m-5 items-center">
      <ContentLoader
        speed={2}
        width={400}
        height={150}
        viewBox="0 0 400 150"
        uniqueKey="my-random-value"
        backgroundColor={theme === 'dark' || resolvedTheme === 'dark' ? '#1e2730' : '#f3f3f3'}
        foregroundColor={theme === 'dark' || resolvedTheme === 'dark' ? '#2d3641' : '#ecebeb'}
        {...props}
      >
        <circle cx="10" cy="20" r="8" />
        <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
        <circle cx="10" cy="50" r="8" />
        <rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
        <circle cx="10" cy="50" r="8" />
        <rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
      </ContentLoader>
    </div>
  )
}

export default SkeletonLoader