NextJS 13 doesn't render SSR

[allenchuang]

While experimenting with NextJS 13, and playing around with React <Suspense/> I realized that the animation for all react-spinners components are not working.

<Suspense fallback={<BarLoader color="#36d7b7" />}>
    <SSRLoadedComponent />
</Suspense>

[JDuqn]

For now I just force all my loaders to be client components with a fallback for server side :

"use client"

import React, { useEffect, useState } from "react"
import { ClipLoader } from "react-spinners"

export const Loader = ({ size }: { size: number }) => {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return (
    <React.Fragment>
      {isClient ? (
        <ClipLoader ... />
      ) : (
        <ServerSideSpinner ... />
      )}
    </React.Fragment>
  )
}

Not sure this is a good approach, but it might help someone.

[davidhu2000]

duplicate of #576

[codewizard-dt]

Very sad to run into this issue. I am migrating our app to SSR and none of these are working. I love these spinners and I would be sad to lose them