CSS

Prevent Button Shrink on Load - A Better UI Pattern with Tailwind CSS

5 Jul 2025 • 8 mins read

When creating loading buttons in React, the common approach of swapping text with a loader using conditional rendering often causes unwanted layout shifts. This article introduces a cleaner solution: layering both the loader and the text using CSS grid and toggling their visibility instead of replacing them. This method ensures the button retains its size, resulting in a smoother, more polished UI—especially when using Tailwind CSS.