Loader is flickering

[Kisama]

there is a flickering when the loader is initialized

looks render with default props and rerender with new props

https://github.com/user-attachments/assets/ef8fc4ee-80d0-4da0-94ce-ffc01164ac7a

[DrZanuff]

@Kisama are you using SSR (e.g. Next.JS)?

In that case you must include the css in your bundle.css manually, like in the docs:

Server Side Rendering

While the library works with SSR, the spinner's animation CSS will be attached to the head only on the hydrate phase, which means the spinners will start animating only after the page is fully loaded. To work around this, include the needed css in your bundle.css manually:

/* App.css */

/* to load animation for a specific spinner */
@import "~spinners-react/lib/SpinnerCircular.css";

/* to load animations for all spinners at once */
@import "~spinners-react/lib/index.css";

https://github.com/adexin/spinners-react/blob/master/README.md?plain=1#L57

[Kisama]

No, I am using react app with tailwindcss like

<div className='flex h-full w-full flex-col items-center justify-center gap-4'>
      <SpinnerCircularFixed
        size={size}
        enabled={enabled}
        thickness={(100 / 4) * thickness} 
        color={color}
        secondaryColor={secondaryColor}
      />
      {message && <div className='type-h4-600 text-[var(--text-primary)]'>{message}</div>}
</div>

[adexin-team]

It looks like the layout styles or passed properties update issue. Could you possibly provide some simple demo showing the issue? Here's the create-react-app example that can be uses as a starting point: spinners-cra-tailwind Currently it doesn't seem to show signs of flickering.