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,247 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 ʕ•ᴥ•ʔ

234,583 views • 2 years ago

CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @​keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @​keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @​keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

146,270 views • 2 years ago

GeoLibre v1.7.0 is here! GeoLibre is a free and open-source, lightweight, cloud-native GIS platform for visualizing, exploring, and analyzing geospatial data. It runs everywhere you do, in the web browser, on the desktop, on mobile, and inside Jupyter notebooks, all while keeping your data local and private. This release opens up the UI to plugins, adds inline color ramp previews across the styling panels, and makes the Whitebox toolbox browsable right from the Processing menu. What's new in v1.7.0 - Plugin UI host API: Plugins can now register first-class right-sidebar panels, toolbar menus, and floating panels that dock beside the built-in Style panel instead of faking an overlay. - Color ramp previews: Both the vector and raster style panels show each colormap's gradient inline, so you can see the colors while you pick rather than reading a list of names. - Richer vector labeling: ArcGIS-style label controls for anchor, offset, rotation, wrap width, and letter case, plus modes that collapse stacked points at the same coordinate into a single label. - Whitebox by category: Browse the whole Whitebox toolbox by category directly in the Processing menu, with an offline-bundled tool catalog for restricted environments. - Collaboration at a glance: An on-canvas session badge and roster show a live dot, the connected-participant count, and who is in the session, with a clear way back to the map. Try it out - Live demo: - GitHub: - Documentation: - Release notes: #GIS #GeospatialData #OpenSource #RemoteSensing #DataVisualization #MapLibre #Python #Plugins

Qiusheng Wu

12,917 views • 2 months ago