Components

Loading

A loading screen component that shows the loading status or in the event of an error, it displays the error message.

LoadingScreen

Component

View code

Show playground

Props

Props	Default	Type
`isLoading`	`true`	`boolean`
`loadingText`	`'Loading'`	`string`
`error`	`null`	`string \| null`
`title`	`'Oops! Something went wrong!'`	`string`
`helpText`	`'Please try again or report the error to us. Thank you!'`	`string`
`hasGoBackButton`	`true`	`boolean`
`goBackText`	`'Go back'`	`string`
`goBackLink`	`'/'`	`string`
`goBackIcon`	`'mdi:keyboard-backspace'`	`string`
`hasRetryButton`	`false`	`boolean`
`retryText`	`'Try again'`	`string`
`retryLimitReachedText`	`'Retry limit reached. Please refresh the page or contact support.'`	`string`
`cooldownText`	`'Retry in'`	`string`
`maxRetryCycles`	`2`	`number`
`maxRetries`	`3`	`number`
`cooldownSeconds`	`60`	`number`
`isFullScreen`	`true`	`boolean`
`spinnerSize`	—	`LoadingSpinnerSize`
`iconContainerSize`	`IconContainerSize.XXL`	`IconContainerSize`
`buttonSize`	—	`ButtonSize`
`isSpaced`	`true`	`boolean`
`titleClass`	`'font-semibold text-xl md:text-2xl text-center leading-6'`	`string`
`errorTextClass`	`'text-text-neutral-subtle font-semibold text-center'`	`string`
`helpTextClass`	`'text-center'`	`string`
`containerClass`	`'py-20'`	`string`

Usage

isLoading

Sets the loading state to true or false.

 <template>
    <LoadingScreen :isLoading="true" />
</template>

Type: boolean
Default: true

loadingText

Sets the text to be displayed in the loading state. Do not add ellpisis (...) or any other characters since it is already included in the component.

 <template>
    <LoadingScreen text="Loading" />
</template>

Type: string
Default: 'Loading'

error

Sets the error message to be displayed in the error state.

Important: Until the loading state is not set to false, the error will not appearing even if it exists.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Something went wrong!" 
    />
</template>

Type: string | null
Default: null

title

Sets the title to be displayed in the error state.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        title="Oops! Something went wrong!" 
    />
</template>

Type: string
Default: 'Oops! Something went wrong!'

helpText

Sets the help text to be displayed in the error state.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        helpText="Please try again or report the error to us. Thank you!" 
    />
</template>

Type: string
Default: 'Please try again or report the error to us. Thank you!'

hasGoBackButton

Shows or hides the go back button in the error state.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        :hasGoBackButton="false"
    />
</template>

Type: boolean
Default: true

goBackText

Sets the text to be displayed in the error state go back button.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        goBackText="Go back" 
    />
</template>

Type: string
Default: 'Go back'

goBackLink

Sets the link for the go back button in the error state.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        goBackLink="/" 
    />
</template>

Type: string
Default: '/'

goBackIcon

Sets the icon for the go back button in the error state.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        goBackIcon="mdi:keyboard-backspace" 
    />
</template>

Type: string
Default: 'mdi:keyboard-backspace'

hasRetryButton

Shows or hides the retry button in the error state.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        hasRetryButton
    />
</template>

Type: boolean
Default: false

retryText

Sets the text to be displayed in the error state retry button.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        retryText="Try again" 
    />
</template>

Type: string
Default: 'Try again'

retryLimitReachedText

Sets the text to be displayed in the error state when the retry limit is reached.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        retryLimitReachedText="Retry limit reached. Please refresh the page or contact support." 
    />
</template>

Type: string
Default: 'Retry limit reached. Please refresh the page or contact support.'

cooldownText

Sets the text to be displayed in the error state when the retry limit is reached.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        cooldownText="Retry in" 
    />
</template>

Type: string
Default: 'Retry in'

maxRetryCycles

Sets the maximum number of retry cycles.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        :maxRetryCycles="2" 
    />
</template>

Type: number
Default: 2

maxRetries

Sets the maximum number of retries.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        :maxRetries="3" 
    />
</template>

Type: number
Default: 3

cooldownSeconds

Sets the cooldown time in seconds.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        :cooldownSeconds="60" 
    />
</template>

Type: number
Default: 60

isFullScreen

Sets the full screen state to true or false. It works exactly the same way for loading or error state.

If it is not full screen, the container height will be smaller and can be adjusted with the containerClass prop.

 <template>
    <LoadingScreen 
        isLoading
        :isFullScreen="false" 
    />
</template>

Type: boolean
Default: true

spinnerSize

Sets the size of the loading spinner. It uses the LoadingSpinner enum.

 <template>
    <LoadingScreen 
        isLoading
        :spinnerSize="LoadingSpinner.LG" 
    />
</template>

Options

Value	Description
`XS`	xs
`SM`	sm
`MD`	md
`LG`	lg
`XL`	xl
`XXL`	2xl
`XXXL`	3xl

iconContainerSize

Sets the size of the icon container. It uses the IconContainerSize enum.

 <template>
    <LoadingScreen 
        isLoading
        :iconContainerSize="IconContainerSize.XXL" 
    />
</template>

Options

Value	Description
`SM`	sm
`MD`	md
`LG`	lg
`XL`	xl
`XXL`	2xl
`XXXL`	3xl

buttonSize

Sets the size of the retry and go back buttons in the error state. It uses the ButtonSize enum.

 <template>
    <LoadingScreen 
        isLoading
        :buttonSize="ButtonSize.LG" 
    />
</template>

Options

Value	Description
`XS`	xs
`SM`	sm
`MD`	md
`LG`	lg
`XL`	xl
`XXL`	2xl

isSpaced

Sets a bigger space between elements in the error state.

 <template>
    <LoadingScreen 
        :isLoading="false"
        error="Reported error message"
        isSpaced
    />
</template>

Type: boolean
Default: true

titleClass

Sets the title class of the error state.

 <template>
    <LoadingScreen 
        isLoading
        titleClass="font-semibold text-xl md:text-2xl text-center leading-6" 
    />
</template>

Type: string
Default: 'font-semibold text-xl md:text-2xl text-center leading-6'

errorTextClass

Sets the error text class of the error state.

 <template>
    <LoadingScreen 
        isLoading
        errorTextClass="text-center text-sm md:text-base" 
    />
</template>

Type: string
Default: 'text-center text-sm md:text-base'

helpTextClass

Sets the help text class of the error state.

 <template>
    <LoadingScreen 
        isLoading
        helpTextClass="text-center text-sm md:text-base" 
    />
</template>

Type: string
Default: 'text-center'

containerClass

Sets the container class of the screen.

 <template>
    <LoadingScreen 
        isLoading
        containerClass="h-[300px]" 
    />
</template>

Type: string
Default: 'py-20'