Source: https://app-studio-6167b.web.app/docs/SplashScreen

@app-studio/components

# SplashScreen

Display an application loading or startup screen with configurable content and presentation.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.tsx)

## Import

```ts
import { SplashScreen } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Text, View } from 'app-studio';
import { Button, SplashScreen } from '@app-studio/components';

/**
 * Demonstrates the controlled `isLoaded` flow inside a bordered frame. "Reload"
 * re-shows the splash; it fades out automatically after ~1.2s.
 */
export const DefaultSplashScreen = () => {
  const [loaded, setLoaded] = useState(false);
  const [run, setRun] = useState(0);

  const start = () => {
    setLoaded(false);
    setRun((n) => n + 1);
    setTimeout(() => setLoaded(true), 1200);
  };

  return (
    <View
      position="relative"
      height={360}
      width="100%"
      maxWidth={360}
      borderRadius={16}
      overflow="hidden"
      borderWidth={1}
      borderStyle="solid"
      borderColor="color-gray-200"
    >
      <View
        flex={1}
        padding={16}
        gap={12}
        alignItems="center"
        justifyContent="center"
      >
        <Text>App content is ready.</Text>
        <Button onClick={start}>Reload splash</Button>
      </View>
      {run > 0 && (
        <SplashScreen
          key={run}
          isLoaded={loaded}
          logo={
            <View
              width={96}
              height={96}
              borderRadius={24}
              backgroundColor="color-blue-500"
            />
          }
        />
      )}
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**SplashScreen**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `logo` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Custom logo node. Takes precedence over `logoSrc`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L6) |
| `logoSrc` | `string` | `—` | Image URL used for the logo when `logo` isn't provided.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L8) |
| `loader` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Custom loading indicator. Defaults to the `Loader` component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L10) |
| `showLoader` | `boolean` | `true` | Show the loading indicator under the logo. Default true.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L12) |
| `duration` | `number` | `600` | Exit animation duration in ms (also the unmount delay). Default 600.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L14) |
| `isLoaded` | `boolean` | `—` | Controlled "loaded" flag. When omitted the component reads the shared `useSplashStore`. When the flag flips true, the splash fades out and unmounts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L20) |
| `onHidden` | `(() => void)` | `—` | Called once the exit animation completes and the splash unmounts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L22) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L23) |

Common inherited styling props (7)

**SplashScreen inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.