Exposing an api to control behaviors loading.js

[SugarDarius]

Goals

1. Controlling the the minimal duration when loading.js is displayed
2. Controlling the moment when loading.js should disappear
3. Controlling the swap between loading.js and the rendering of the page/layout
4. Make transitions smooth and controlled

Non-Goals

1. Blocking the UI when Suspense is done
2. Infinite loaders/skeletons

Background

This idea came after implementing multiple loading.js files in an app where the display felt glitchy on high speed networks.
It appears that when the network is fast the time display loading.js is very short and makes the UI feel like it's glitch.

It would be great to propose an api where we could control the behaviors of loading.js to keep a nice look and feel when swapping from the file to the completed streamed content.

Proposal

As an api design I first think at something very simple such as:

export const config = {
  takeAtLeast: 2 // Minimum duration in seconds
  transition: "fading" // Transition type
}

export default Loading() {
  return <Skeleton />
}

This means the loading.js file will be displayed for at least 2 seconds with a fading transition to make the UI smooth.

Also we could think at an api where it's up to developers to decide when the loading.js file should swap with a guard to avoid to block the UI indefinitely:

import { useSwap } from "next/suspense" // or "next/loading"

export const config = {
  takeAtMost: 4,
  transition: "fading"
}

export default function Loading() {
  const swap = useSwap()
  
  return <Skeleton onAnimationEnd={swap} />
}

This means that loading.js will be kept on screen for at most 4s but will be swapped when we call the function swap if the animation is ended before.

Thanks 🙏🏻