This package has been deprecated

Author message:

@highlight-ui/sandbox-loading-state is now deprecated, please use @highlight-ui/sandbox-spinner and @highlight-ui/skeleton

@highlight-ui/sandbox-loading-state

Installation

yarn add @highlight-ui/sandbox-loading-state

Usage

In your TypeScript file:

import {
  LoadingState,
  LoadingStateProps,
} from '@highlight-ui/sandbox-loading-state';

In your (S)CSS file:

@import url('@highlight-ui/sandbox-loading-state');

Skeleton

In your TypeScript file:

import { LoadingState, LoadingStateProps } from '@highlight-ui/loading-state';
import { Skeleton } from '@highlight-ui/skeleton';

if (status === 'idle') {
  return <LoadingState state="idle" />;
}

if (status === 'loading') {
  return (
    <LoadingState
      state="loading"
      indicator={<Skeleton repeat={3} />}
      message="Loading some arbitrary data. Please wait."
    />
  );
}

return (
  <LoadingState
    state="completed"
    message="Arbitrary data has been loaded. This data is ready to use."
  />
);

Spinner

In your TypeScript file:

import { LoadingState, LoadingStateProps } from '@highlight-ui/loading-state';
import { Spinner } from '@highlight-ui/spinner';

if (status === 'idle') {
  return <LoadingState state="idle" />;
}

if (status === 'loading') {
  return (
    <LoadingState
      state="loading"
      indicator={<Spinner />}
      message="Loading some arbitrary data. Please wait."
    />
  );
}

return (
  <LoadingState
    state="completed"
    message="Arbitrary data has been loaded. This data is ready to use."
  />
);

Documentation

Please visit personio.design