Загрузка видео...

Не удалось загрузить видео

На главную

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 лет назад