search

davidhu2000 / react-spinners

A collection of loading spinner components for react
https://www.davidhu.io/react-spinners
MIT License
3k stars 260 forks source link

MoonLoader wobbles when provided a size not evenly divisible by 7 #583

Closed RigoOnRails closed 1 week ago

RigoOnRails commented 3 months ago

Package Version 0.13.4

Describe the bug The MoonLoader component does some math internally to compute the correct border width for the spinner + the overall container size. The magic number here seems to be 7.

https://github.com/davidhu2000/react-spinners/blob/ddbcf239208a1bae07e276159fcdff3aa6090e5e/src/MoonLoader.tsx#L18

When provided a size that is evenly divisible by 7 (Eg. 14, 21, 28, etc.), the component renders perfectly & doesn't wobble, due to the perfect whole numbers in the computed sizes:

Capture d’écran 2024-03-18 à 17 52 40

But when you provide an arbitrary size like 24, you get these very specific sizes that start causing the wobbling, I assume due to the browser engine:

Capture d’écran 2024-03-18 à 17 56 08

To Reproduce Provide a size not evenly divisible by 7.

Expected behavior The component should be stable, no matter the size provided.

Additional context This is tested using Chrome on macOS.

davidhu2000 commented 1 week ago

we could just do

const moonSize = Math.round(value / 7);

but that could mean the final size won't exactly be right