<OneAuxiliaLoading>

The <OneAuxiliaLoading> renders its children while OneAuxilia is loading, and is helpful for showing a custom loading state.

Usage

App Router

app/layout.tsx

import { OneAuxiliaProvider, OneAuxiliaLoaded, OneAuxiliaLoading } from '@oneauxilia/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <OneAuxiliaProvider>
      <html lang="en">
        <body>
          <OneAuxiliaLoading>
            <div>OneAuxilia is loading...</div>
          </OneAuxiliaLoading>
          <OneAuxiliaLoaded>{children}</OneAuxiliaLoaded>
        </body>
      </html>
    </OneAuxiliaProvider>
  )
}

Pages Router

pages/_app.tsx

import '@/styles/globals.css'
import { OneAuxiliaLoaded, OneAuxiliaLoading, OneAuxiliaProvider } from '@oneauxilia/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <OneAuxiliaProvider {...pageProps}>
      <OneAuxiliaLoading>
        <div>OneAuxilia is loading</div>
      </OneAuxiliaLoading>
      <OneAuxiliaLoaded>
        <Component {...pageProps} />
      </OneAuxiliaLoaded>
    </OneAuxiliaProvider>
  )
}

export default MyApp

app.tsx

import { OneAuxiliaLoaded, OneAuxiliaLoading, OneAuxiliaProvider } from '@oneauxilia/oneauxilia-react'

function App() {
  return (
    <OneAuxiliaProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <OneAuxiliaLoading>
        <div>OneAuxilia is loading</div>
      </OneAuxiliaLoading>
      <OneAuxiliaLoaded>
        <Page />
      </OneAuxiliaLoaded>
      <div>This div is always visible</div>
    </OneAuxiliaProvider>
  )
}

function Page() {
  return <div>The content</div>
}

export default App

routes/index.tsx

import { OneAuxiliaLoading } from '@oneauxilia/remix'

export default function Index() {
  return (
    <div>
      <OneAuxiliaLoading>
        <div>OneAuxilia is loading</div>
      </OneAuxiliaLoading>
    </div>
  )
}

Previous<OneAuxiliaLoaded>Next<Protect>

Last updated 7 months ago