<Loading>

Environment: client, and server if ssr: true.
Implemented by: vike-react.

You need vike-react to be able to use the Loading setting.

💚

Contribution welcome to implement the Loading setting for vike-vue and vike-solid.

The Loading setting allows you to define a loading animation.

// pages/+Loading.jsx
 
export default {
  layout: LoadingLayout,
  component: LoadingComponent
}
 
function LoadingLayout() {
  // Applies to the page and all layouts
  return <div>Loading...</div>
}
 
function LoadingComponent() {
  // Applies on a component-level
  return <div>Loading...</div>
}

Default

The default Loading.component is the following.

The default loading animation. Its width is 100% of the parent (here the parent is artificially set to 400px), and its height is proportional to its width.

If you want to use a different loading animation, then make sure to define Loading.component in order to override the default.

See also