Loading video...

Video Failed to Load

Go Home

Next.js 15.3: useLinkStatus Define inline feedback to show while navigations complete. Tip: • Avoid an unnecessary flicker of pending UI on fast loads by adding an initial animation delay (e.g. 100ms) and fading in from 0 opacity.

155,034 views • 1 year ago •via X (Twitter)

10 Comments

Delba's profile picture
Delba1 year ago

More client-orientated features coming soon 😘 • Shipped @gao_jude • Docs: • Playground with code examples:

UserInterface's profile picture
UserInterface2 years ago

UIX Network: A Beacon for Black-Owned Businesses and Content Creators #Business

Izak Filmalter's profile picture
Izak Filmalter1 year ago

Bro the fact that we have to show a loading state on the primary nav is the problem.

sunil pai's profile picture
sunil pai1 year ago

You are a god of the UI demo animation

Delba's profile picture
Delba1 year ago

🤍

Jason Rai's profile picture
Jason Rai1 year ago

Curious why it needs to be a child of Link. What if. wanted to display some pending state UI in a different area of the application? Like a line that runs across the top of the page for example.

Delba's profile picture
Delba1 year ago

This is specifically for inline feedback, same as (there more be something for global indicators in the future)

meowy's profile picture
meowy1 year ago

Can we get your remotion template/how you do it video? 👀

hood's profile picture
hood1 year ago

Re: Avoid an unnecessary flicker of pending UI on fast loads... Are we really asking users to do workarounds like that on a framework that’s supposed to be targeted to companies seeking for a production-ready foundation for websites/web apps?

Delba's profile picture
Delba1 year ago

It’s actually a good recommendation 😜 because you can do it cheaply in CSS

Related Videos

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,131 views • 2 years ago