How do you make a button that doesn't change it's width when it's in a loading state? Use CSS Grid to stack items, and visibility: hidden to hide/show spinner! This approach allows the largest item to size the button, and keeps the button text accessible - ThreadSky

wesbos.com • 77 days ago

How do you make a button that doesn't change it's width when it's in a loading state?

Use CSS Grid to stack items, and visibility: hidden to hide/show spinner!

This approach allows the largest item to size the button, and keeps the button text accessible

Comments

devinda.me•77 days ago

learn't this some time ago watching a @samselikoff.com vid - he mentioned it only for a moment in that vid but it was the highlight for me lol

jlmx.dev•77 days ago

Me trying to comprehend

aleksandrhovhannisyan.com•77 days ago

Had to fix this problem a couple years ago. Learned the grid trick from one of my co-workers and wrote about it. https://www.aleksandrhovhannisyan.com/blog/accommodating-the-longest-text-in-a-label/

Codepen: https://codepen.io/AleksandrHovhannisyan/pen/BaZJoyK

kokode.io•77 days ago

📌

cory.laviska.com•77 days ago

I change visibility of the label and absolutely position a loader above it 🙈

wesbos.com•77 days ago

CORY

tere.ro•77 days ago

📌

saewitz.com•77 days ago

Please don't do this. Never hide context to the user while something is loading. You're much better showing the loading state over the content than hiding the content. Here's an example of my loading button:

jack.io•76 days ago

I guess better from a UX perspective, but it looks a little messy

saewitz.com•76 days ago

In isolation maybe but it feels very natural in real-world situations. It’s far less unnerving than having content disappear during a mutation or action.

wesbos.com•76 days ago

Yeah I agree that there are better UI patterns than this. It’s the same with labels that disappear as you start typing

saewitz.com•76 days ago

100% agreed, or forcing content layout shift when you don't have to. serenity now

nicol.dev•77 days ago

Great video, thanks Wes!

I’d go one step further and use both opacity and visibility, as then you’re able to transition between the two for a nice fade effect.

Also, small perf hack, if you go from opacity: 0.001 -> 1 instead of 0 ->1, it can use GPU to render. (I stole that from GSAP years ago)

wesbos.com•77 days ago

Ohhh good trick! I wonder with allow discrete is we will need this

raycodes.com•77 days ago

After clicking that button!

leon.ms•77 days ago

Just take an image of the base button, send it to a Cloudflare Worker, calculate the exact width based on screen size, send back a new loading button and replace it with HTMX. ez

coryty.com•77 days ago

This is great tip though

ric-m12.bsky.social•77 days ago

📌

meerpohl.dev•77 days ago

Great tip but what‘s up with the payback speed?

wesbos.com•77 days ago

Bluesky only lets you upload 60 seconds so I was trying to be funny. Posted links to elsewhere in the replies

jeroenreumkens.com•77 days ago

Hahaha I love this

ryan.phonicsandstuff.com•77 days ago

I wonder if this would be a good way to avoid state flash when loading from local storage settings.

kyleshevl.in•77 days ago

I absolutely position my spinner in the center of the button and then set the text to opacity: 0. No layout shift. Been doing that before Grid was even a thing.

json-statham.bsky.social•77 days ago

Never thought of doing that before. Nice way of doing it

kyleshevl.in•77 days ago

I was thinking about this further. The reason I have continued to do it this way is CSS Grid isn’t available in React Native.

I recognize this is a web tip. Most people won’t have that constraint.

wesbos.com•77 days ago

It's good, but this is better in some cases, and is accessible. I address both approaches in the video

miguel.reeple.studio•77 days ago

You definitely got points from me when you showed the `aria-label` trick, really cool

wesbos.com•77 days ago

I think ideally you'd use aria-live to announce that a save is happening - but as always, it depends on what you are doing

kyleshevl.in•77 days ago

I’ve never used display: none since that will remove it from screen readers. I’ll give the full video a watch.

kyleshevl.in•77 days ago

I see what you’re getting at. I’ve never really worried about updating the text to “Saving…” but that makes sense.

I’m no accessibility expert, happy to learn another nugget.

collinsworth.dev•77 days ago

Re: accessibility: while this is ok, it's generally better to use actual text (probably a `.sr-only` span) than `aria-label`. Text is more easily picked up by ATs universally, and can also be translated to other languages more easily than HTML attributes. Plus: don't use ARIA if you don't have to.

jack.io•76 days ago

Nice! I used the opacity: 0; + abs positioning trick on a project recently but definitely was a bit concerned about a11y. I dig this method, very elegant

wesbos.com•77 days ago

Uploaded it to youtube so we can get an embed →
https://www.youtube.com/watch?v=8327_1PINWI

jamesperkins.dev•77 days ago

Unkey will be forever grateful for all the CSS experts!

None of us knew this was possible

rampolla.bsky.social•77 days ago

Didn't even know that was a feature here. Neat.

chris.manson.ie•76 days ago

🧌😂

dvnrsn.bsky.social•77 days ago

Good use of grid-area. Thanks for the tip.

hugheskp.bsky.social•58 days ago

Nifty tip ! 📌

rokuyondev.bsky.social•75 days ago

📌

angular2react.com•70 days ago

Good one!

kick808.bsky.social•77 days ago

I just worked this out on a mobile content area using the grid stacking feature. It was awesome to figure it out. grid-template-row method.

wesbos.com•77 days ago

If you can't comprehend 4×, links to regular speed video 👇🏻

https://twitter.com/wesbos/status/1866895899554926912

https://www.linkedin.com/feed/update/urn:li:activity:7272663944106782720/

https://www.threads.net/@wesbos/post/DDck7SpKB88

https://www.reddit.com/r/css/comments/1hbyxc1/a_button_that_doesnt_change_width_when_showing_a/

https://www.tiktok.com/@wesbos/video/7447207307097787653

https://www.instagram.com/reel/DDckx3hR3xh/

baptistearno.com•77 days ago

😂😂

matroe.bsky.social•77 days ago

thx, i’m fine

vinnymac.dev•77 days ago

Fun fact, if you play back the video at 0.25x the speed not only can I hear every other word, but it makes you sound like you are drunkenly mansplaining CSS

erikras.com•77 days ago

Feels like you’re intentionally pulling engagement from 🦋. Is it just that the video is too long?

wesbos.com•77 days ago

😟 It’s too long, I’ve skeeted like 10 times about how I’d pay for longer and better quality uploads.

Isn’t this the platform where we’re allowed to post links? I just wanna share what I made and I can’t upload it here

johnraymon.com•77 days ago

samalrasmussen.bsky.social•77 days ago

Youtube embeds work fine, right?

wesbos.com•76 days ago

Yep, my shorts aren’t always YouTube videos though because they don’t fit into the 60 second limit as well.

I ended up re-editing this one for YouTube landscape but it’s not always the case

mikee.page•77 days ago

An image with the link to the video would be better 😅

syedmsawaid.com•77 days ago

rookie mistake. just install shadcn

wesbos.com•77 days ago

I hate replies like these. I use Shadcn, but are you not curious how things work? Do you not hit issues where you need to position things or do custom CSS?

syedmsawaid.com•76 days ago

I realize my joke came across differently than I intended. Sorry for causing any upset, that wasn't my goal.

I absolutely love to get into details on how things work. I learned a lot of front-end stuff from you and will continue to do so.

hipstersmoothie.com•76 days ago

Also shadcn doesn't support this 🙃

syedmsawaid.com•76 days ago

😔

richardzheng.bsky.social•77 days ago

i need all of my tutorials to be 4x with screen share like this

gixxerblade.bsky.social•76 days ago

Fwiw one of my most favorite videos you’ve put out. I’ve liked it on X, YT, and now BS

wesbos.com•76 days ago

haha thanks a ton!

Comments

Posting Rules

Reply