next-page-transitions | Simple and customizable page transitions for Next.js apps | Frontend Framework library

Suppose you have a page that needs to make a network request before it can display its content. You could have the page itself render a loading spinner until it's ready to go, but then you lose the beautiful page transition animation you spent all that time perfecting. Luckily, this library makes it easy to handle that case. If you add a static property pageTransitionDelayEnter = true to your page component, your page will be passed a special callback prop that you can use to indicate that everything has finished loading. In the meantime, your page will be mounted, but the enter transition won't be started yet, and a loading indicator of your choice will be shown in its place. When you call the callback prop, the loading spinner will be hidden, and your page will be animated into place! By default, the callback is passed via the pageTransitionReadyToEnter prop, but this can be specified by setting the loadingCallbackName prop on your PageTransition component. "But my network requests are usually fast!", you'll say. "They usually take only a few hundred milliseconds, and I don't want to flash a loading indicator on the screen for such a short period of time!" This library can handle that case as well. If you specify a loadingDelay prop, the loading indicator won't be shown until that much time has elapsed. If your component is ready to enter before then, the loading indicator will never be shown, keeping the UX clean and snappy. However, if your component is taking a long time, the loading indicator will be shown until your component is ready. "That sounds kind of like the Placeholder concept from that React suspense talk. The one in this YouTube video." Yes, yes it does! That was the inspiration for this feature.