Skip to main content

DataContainer

A loading/error wrapper for async sections. When isLoading is true it shows a spinner or the brand AppLoader; when error is set it shows an alert; otherwise it renders children.

📖 Storybook

Preview​

Live preview↗ Open in Storybook

Import​

import { DataContainer } from "@xocialive/ui-components";
import type { DataContainerProps } from "@xocialive/ui-components/components";

Props​

PropTypeDefaultDescription
childrenReactNode—Content rendered when not loading and no error
isLoadingbooleanfalseShows the loading UI when true
loadingType"circular" | "app" | "none""app""circular" → centred spinner; "app" → full AppLoader; "none" → nothing
errorany—RTK Query error object or Error. Shows an Alert with the error description
customAppLoaderReactNode—Replaces the default AppLoader when loadingType is "app"
animationDataobject—Custom Lottie JSON for the default AppLoader
textOverridesDataContainerTexts—Label overrides for loading/error messages

DataContainerTexts​

interface DataContainerTexts {
  loading?: string; // e.g. t("common.loading")
  errorLoadingData?: string; // e.g. t("common.errorLoadingData")
  unknownError?: string; // fallback when error has no message
}

Basic usage​

src/modules/items/views/ListItems.tsx
import { DataContainer } from "@xocialive/ui-components";

<DataContainer
  isLoading={isLoading}
  textOverrides={{
    loading: t("common.loading"),
  }}
>
  <PageListView ... />
</DataContainer>

With RTK Query​

import { DataContainer } from "@xocialive/ui-components";

const { data, isLoading, error } = useGetItemsQuery({});

<DataContainer isLoading={isLoading} error={error}>
  <ItemsTable data={data?.body || []} />
</DataContainer>;

With circular spinner​

Use loadingType="circular" for small inline sections instead of the full-screen loader:

<DataContainer isLoading={isLoading} loadingType="circular">
  <SomeSection />
</DataContainer>

Error display​

When error is set DataContainer reads error.data.description (RTK Query shape) or error.message and displays it in a MUI Alert:

<DataContainer error={query.error}>
  <UserTable users={data} />
</DataContainer>

See also​