正在加载视频...

视频加载失败

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 次观看 • 1 年前 •via X (Twitter)

10 条评论

Delba 的头像
Delba1 年前

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

UserInterface 的头像
UserInterface2 年前

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

Izak Filmalter 的头像
Izak Filmalter1 年前

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

sunil pai 的头像
sunil pai1 年前

You are a god of the UI demo animation

Delba 的头像
Delba1 年前

🤍

Jason Rai 的头像
Jason Rai1 年前

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 的头像
Delba1 年前

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

meowy 的头像
meowy1 年前

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

hood 的头像
hood1 年前

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 的头像
Delba1 年前

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

相关视频

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 次观看 • 2 年前