Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

10 Kommentare

Profilbild von Delba
Delbavor 1 Jahr

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

Profilbild von UserInterface
UserInterfacevor 2 Jahren

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

Profilbild von Izak Filmalter
Izak Filmaltervor 1 Jahr

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

Profilbild von sunil pai
sunil paivor 1 Jahr

You are a god of the UI demo animation

Profilbild von Delba
Delbavor 1 Jahr

🤍

Profilbild von Jason Rai
Jason Raivor 1 Jahr

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.

Profilbild von Delba
Delbavor 1 Jahr

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

Profilbild von meowy
meowyvor 1 Jahr

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

Profilbild von hood
hoodvor 1 Jahr

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?

Profilbild von Delba
Delbavor 1 Jahr

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

Ähnliche 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 Aufrufe • vor 2 Jahren