Customizing default states

Customize loading, error and empty states.

Components have three customizable states that you can override to match your application’s design:

1. Loading state: Shown while data is being fetched
2. Error state: Displayed when an error occurs
3. Empty state: Appears when no data is available

You can customize these states globally for all components using ThemeProvider:

import { ThemeProvider, Counter, TimeSeries } from "@propeldata/ui-kit"

function App() {
  return (
    <ThemeProvider
      renderLoader={() => <div>Loading...</div>}
      errorFallback={() => <h1>Error</h1>}
      renderEmpty={() => <span>No Data</span>}
      components={{
        Input: ({ props }) => <MyCustomInput {...props} />
        Button: ({ props }) => <MyCustomButton {...props} />
      }}
    >
      <Counter />
    </ThemeProvider>
  );
}

You can also customize these states for individual components using the renderLoader, errorFallback, and renderEmpty props:

import { Counter } from "@propeldata/ui-kit"

function App() {
  return (
    <Counter
      query={{ accessToken: 'invalid-access-token' }}
      card
      errorFallback={() => (
        <div
          style={{
            border: "var(--propel-accent-a7)",
            color: "var(--propel-accent-a11)",
            padding: '1rem'
          }}
        >
          Custom error fallback
        </div>
      )}
    />
  );
}