Comments (8)
I have tested by using use client
and it's working fine on the Client Side but I want it to be useful on the Server Side too.
from react-spinners.
i'll need to spent some time looking into how to handle the new server component paradigm. I think it's probably not working because the animation are created outside of the component
https://github.com/davidhu2000/react-spinners/blob/main/src/ClimbingBoxLoader.tsx#L7-L21
so maybe that code isn't executed after the code is sent to the client
from react-spinners.
Yeah, you're right, this could be the one of reasons.
Take your time and fix it.
Thanks
from react-spinners.
client-side animation stuff cannot be rendered on the server. They need to be marked as client component to work. Its not something that's fixable imo.
from react-spinners.
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>
)
}
ServerSideSpinner is a regular spinner animated with tailwind.
Not sure this is a good approach, but it might help someone.
from react-spinners.
Don't do this, make a separate file, add "use client" tag on top, import the spinner and immediately export it as const or default (,ur choice) and import this spinner in your pages.
from react-spinners.
i haven't had time to work on this recently, but one potential approach would be add use client
on top of each loader, and add a setState call for each animation. This ensures it will run on the client.
const [animation] = useState(createAnimation(...))
a quick test locally does seem to work, just need to update it all. Maybe hack on it in a coming weekend.
i thought maybe using next dynamic could do it, but the create Aniamtion still doesn't run on the client
const Loader = dynamic(() => import("react-spinners/ClimbingBoxLoader"), { ssr: false });
from react-spinners.
const [animation] = useState(createAnimation(...))
This will execute createAnimation
on every render uselessly, I would advise using a callback
const [animation] = useState(() => createAnimation(...))
from react-spinners.
Related Issues (20)
- Prop `style` did not match HOT 2
- Feature request: Support React Native HOT 3
- Pacman Loader overlaps with other content HOT 2
- Update colors prop to validate using typings
- FaderLoader does not have feature to resize. HOT 3
- beat_loader.js(x) HOT 1
- NextJS 13 doesn't render SSR HOT 2
- Delay at beginning of spinner HOT 1
- Font-size 0 breaks em CSS unit sizing for Pacman loader
- Is It Possible To add a variable CSS Color as Color? HOT 3
- Bounce & Pacman - broken on first part of the animation
- FadeLoader is not centered
- Proposal for Implementing Search Filters on React Spinners
- HashLoader color is taken from the last HashLoader component
- HashLoader rgb color hides 2 lines
- MoonLoader wobbles when provided a size not evenly divisible by 7
- Upgrading from 0.13.8 to 1.0.0 HOT 3
- Type error HOT 1
- FadeLoader size property similar to MoonLoader HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spinners.