Edit this page

<Loading>

Environment: client, and server (if ssr: true).

Provided by: vike-react.

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

💚

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

The +Loading setting adds <Suspense> fallbacks, with the purpose of showing loading animations.

// pages/+Loading.jsx
 
export default {
  layout: LoadingLayout,
  component: LoadingComponent
}
 
function LoadingLayout() {
  // Shown when a page or layout is loading
  return <div>Loading...</div>
}
 
function LoadingComponent() {
  // Shown when a component is loading
  return <div>Loading...</div>
}

This is how +Loading is embedded:

<Suspense fallback={Loading.layout}>             ⟸ component defined by +Loading.layout
  <Layout>                                       ⟸ component defined by +Layout
    <Page>                                       ⟸ component defined by +Page
      {/* ... */}
      <Suspense fallback={Loading.component}>    ⟸ component defined by +Loading.component
        <SomeComponent />
      </Suspense>
      {/* ... */}
    </Page>
  </Layout>
</Suspense>

This means that +Loading is only used if components suspend. Consequently:

• If your app doesn't include any suspending components, then +Loading has no effect.
• If you use +data, then +Loading has no effect — because +data pauses the entire rendering process (it doesn't suspend any component).

The +Loading component is commonly used by vike-react-query and vike-react-apollo users, as these extensions suspend components.

Default

The default Loading.component is:

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

See also

• vike-react-query
• vike-react-apollo