Framer Motion - animation already done on page load - SSR problem?

Question

I'm trying to create a really simple loader animation with Framer Motion, and I got stuck with some weird things happening.

When I reload the page animation seems to be already completed, and it doesn't repeat as I specified in transition prop. My code is really simple at this point and I have no clue what might be the problem, except one - my app is built with gatsby, which is server side rendered. But, docs say that motion components are fully compatible with SSR. I also tried passing rotate: 0 as initial prop, but it didn't help either.

Here's my component:

<motion.div 
    className="loader"
    animate={{ 
        rotate: 360,
        transition: { repeat: Infinity, ease: 'linear', duration: .5 }
    }}
/>

.loader {
    height: 1.5rem;
    width: 1.5rem;
    border: transparent solid 3px;
    border-top: white solid 3px;
    border-radius: 50%;
}

EDIT: I made it working by creating animation controls and running it when component mounts:

const testControls = useAnimation();

useEffect(() => {
    testControls.start({
        rotate: 360,
        transition: { repeat: Infinity, ease: 'linear' }
    })
}, []);

return (
    <motion.div 
        className="loader"
        animate={testControls}
    />
)

But still, I don't really understand why the previous way didn't work and if it's really SSR fault, did I fix correctly?

Thanks for any advices!