# SuperwallLoading

`<SuperwallLoading />` is a component that renders its children only when Superwall is loading or not yet configured. This component can be used to display a loading indicator or a placeholder while the Superwall SDK is initializing.

Once Superwall is configured and no longer in a loading state, this component will render `null`.

**Note:** This component will not render if there's a configuration error. Use `<SuperwallError />` to handle error states.

Props [#props]

<TypeTable
  type="{
  children: {
    type: &#x22;React.ReactNode&#x22;,
    description: &#x22;Content to render while Superwall is loading or not yet configured.&#x22;,
    required: true,
  },
}"
/>

Example [#example]

```tsx
import {
  SuperwallProvider,
  SuperwallLoading,
  SuperwallLoaded,
  SuperwallError,
} from "expo-superwall";
import { ActivityIndicator, View, Text } from "react-native";

const API_KEY = "YOUR_SUPERWALL_API_KEY";

export default function App() {
  return (
    <SuperwallProvider apiKeys={{ ios: API_KEY }}>
      <SuperwallLoading>
        <ActivityIndicator style={{ flex: 1 }} />
      </SuperwallLoading>
      <SuperwallError>
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Failed to load Superwall</Text>
        </View>
      </SuperwallError>
      <SuperwallLoaded>
        {/* Your main app screen or component */}
        <MainAppScreen />
      </SuperwallLoaded>
    </SuperwallProvider>
  );
}

function MainAppScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Superwall SDK is ready!</Text>
      {/* Rest of your app's UI */}
    </View>
  );
}
```

Related Components [#related-components]

* [`<SuperwallLoaded />`](/docs/expo/sdk-reference/components/SuperwallLoaded) - Renders children when Superwall is ready
* [`<SuperwallError />`](/docs/expo/sdk-reference/components/SuperwallError) - Renders children when Superwall configuration fails