Show case

Here are several examples of how to use the skeleton-loading component, categorized by its properties.

1. Animation

This example demonstrates the basic animation of the SkeletonLoader. The shimmer effect moves across the defined shapes, indicating a loading state. You can control the animation's behavior using the animate, speed, and interval props.

Preview

Code

import React from 'react';
import { SKELETON_HEIGHT } from './constants';
import SkeletonLoader, { Circle, Rect } from '@flexnative/skeleton-loading';
import DemoBlock from '../../common/DemoBlock';


export default class extends React.PureComponent {
  render() {
    return (
      <DemoBlock>
        {/* With Animation (default) */}
        <SkeletonLoader width={'100%'} height={SKELETON_HEIGHT} animate={true} >
          <Rect x="48" y="8" rx="3" ry="3" width="88" height="10" />
          <Rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
          <Rect x="0" y="56" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="72" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
          <Circle cx="20" cy="20" r="20" />
        </SkeletonLoader>

        {/* Without Animation (default) */}

        <SkeletonLoader width={'100%'}  height={SKELETON_HEIGHT} animate={false}>
          <Rect x="48" y="8" rx="3" ry="3" width="88" height="10" />
          <Rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
          <Rect x="0" y="56" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="72" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
          <Circle cx="20" cy="20" r="20" />
        </SkeletonLoader>

        {/* animation's behavior using the `speed`, and `interval` props. */}

        <SkeletonLoader width={'100%'} height={SKELETON_HEIGHT} interval={2} speed={0.5}>
          <Rect x="48" y="8" rx="3" ry="3" width="88" height="10" />
          <Rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
          <Rect x="0" y="56" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="72" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
          <Circle cx="20" cy="20" r="20" />
        </SkeletonLoader>
      </DemoBlock>
    );
  }
}

2. Mask

The beforeMask property in the SkeletonLoader is designed to receive the SVG shapes (like Rect, Circle, or Path) that define the layout of your skeleton. These elements act as a mask, and the loading animation (the highlight/shimmer effect) is rendered through them.

In the flexnative library, you can import these shapes directly from the package. Here is an example of how to use beforeMask to create a skeleton for a typical list item containing an avatar and two lines of text:

Preview

Code

import React from 'react';
import SkeletonLoader, { Circle, Rect } from '@flexnative/skeleton-loading';
import DemoBlock from '../../common/DemoBlock';


export default class extends React.PureComponent {
  render() {
    return (
      <DemoBlock>
        <SkeletonLoader
          speed={1.5}
          width={300}
          height={80}
          backgroundColor="#e0e0e0"
          foregroundColor="#f5f5f5"
          beforeMask={
            <React.Fragment>
              {/* Avatar circle */}
              <Circle cx="40" cy="40" r="30" />
              
              {/* Top line of text (Title) */}
              <Rect x="85" y="20" rx="4" ry="4" width="180" height="15" />
              
              {/* Bottom line of text (Subtitle) */}
              <Rect x="85" y="45" rx="3" ry="3" width="120" height="10" />
            </React.Fragment>
          } />
      </DemoBlock>
    );
  }
}

3. Colors

Customize the look of your skeleton components using the backgroundColor and foregroundColor properties. backgroundColor defines the base color of the shapes, while foregroundColor defines the color of the highlight (shimmer) effect. This is useful for matching your application's brand colors or ensuring the loader blends seamlessly into different UI backgrounds.

Preview

Code

import React from 'react';
import { SKELETON_HEIGHT } from './constants';
import SkeletonLoader, { Circle, Rect } from '@flexnative/skeleton-loading';
import DemoBlock from '../../common/DemoBlock';


export default class extends React.PureComponent {
  render() {
    return (
      <DemoBlock>
        {/* Example 1: Custom colors - Blue background with a lighter blue shimmer */}
        <SkeletonLoader
          width={'100%'}
          height={SKELETON_HEIGHT}
          backgroundColor="#a8dadc"
          foregroundColor="#457b9d"
        >
          <Rect x="48" y="8" rx="3" ry="3" width="88" height="10" />
          <Rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
          <Rect x="0" y="56" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="72" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
          <Circle cx="20" cy="20" r="20" />
        </SkeletonLoader>

        {/* Add some spacing between examples */}
        <div style={{ height: 20 }} />

        {/* Example 2: Custom colors - Dark background with a contrasting shimmer */}
        <SkeletonLoader
          width={'100%'}
          height={SKELETON_HEIGHT}
          backgroundColor="#343a40"
          foregroundColor="#6c757d"
          speed={1.5}
        >
          <Rect x="48" y="8" rx="3" ry="3" width="88" height="10" />
          <Rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
          <Rect x="0" y="56" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="72" rx="3" ry="3" width="100%" height="6" />
          <Rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
          <Circle cx="20" cy="20" r="20" />
        </SkeletonLoader>
      </DemoBlock>
    );
  }
}