Content around the spinner (sidebar, previous paginated items) seem to bounce up and down, vertically. Issue disappears when the spinner is not active.

If I scroll almost to the end (half the height of the spinner) this won't happen, its only when I scroll so far the entire spinner is visible that the page 'bounces'.

I have this code, which shows a spinner when profiles are loading or paginating:

{(this.state.profilesLoading || this.state.profilesPaginating) && (<div className="flex justify-center items-center h-full">
    <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
</div>)}

If I remove the inner div, no more bounce:

{(this.state.profilesLoading || this.state.profilesPaginating) && (<div className="flex justify-center items-center h-full">
    Loading...
</div>)}

Unsure if this is a React bug with evaluating conditional checks and its re-render logic, Tailwind bug with its animations, or JavaScript bug in general?