Skeleton Loading

The FlexNative Skeleton Loading is part of the FlexNative and is available under the @flexnative/skeleton-loading NPM package.

Dependencies

Installation

You can installing FlexNative Skeleton Loading packages using npm:

npm i @flexnative/skeleton-loading

API

import SkeletonLoader from '@flexnative/skeleton-loading';

Component

SkeletonLoader

Type: React.Component<IContentLoaderProps<T>>

Properties

info

IContentLoaderProps props extends SvgProps so any SvgProps propertie it is applicable also in IContentLoaderProps

Name	Type	Required	Default Value	Description
animate	`boolean`	false	`true`	Boolean indicator whether to animate skeleton loading or not.
backgroundColor	`ColorValue`	false	`undefined`	Background color.
foregroundColor	`ColorValue`	false	`undefined`	Foreground color.
speed	`number`	false	`1.2`	Animation speed.
interval	`number`	false	`0.25`	Animation interval.
uniqueKey	`string`	false	`random string`	Used for unique key for `<Rect fill='' clipPath='' />`
beforeMask	`JSX.Element`	false	`random string`	Costum JSX.Element to render before loading mask.

Usecase Examples

The following example demonstrates the FlexNative Skeleton Loading in action.

warning

In documentation apprence of components may not be in correct way. To view the component in exact design please view the demo app.

Default

Preview
Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 20:48:57
 * @ Description: Examples of SkeletonLoader component with default settings.
 */

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


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <SkeletonLoader width={'100%'} height={SKELETON_HEIGHT}>
          <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>
      </div>
    );
  }
}

Colors

Preview
Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 20:47:54
 * @ Description: Examples of SkeletonLoader component with backgroundColor and foregroundColor.
 */

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


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <SkeletonLoader width={'100%'} height={SKELETON_HEIGHT} backgroundColor='crimson' foregroundColor='#FFC436'>
          <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>
      </div>
    );
  }
}

Animation Speed

Preview
Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 20:51:18
 * @ Description: Examples of SkeletonLoader component with custom speed (animation speed).
 */

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


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <SkeletonLoader width={'100%'} height={SKELETON_HEIGHT} 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>
      </div>
    );
  }
}

Animation

Preview
Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 21:27:04
 * @ Description: Examples of SkeletonLoader component with animation.
 */

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


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <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>

        <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>
      </div>
    );
  }
}

Animation Interval

Preview
Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 21:29:48
 * @ Description: Examples of SkeletonLoader component with animation interval.
 */

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


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <SkeletonLoader width={'100%'} height={SKELETON_HEIGHT} interval={2}>
          <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>
      </div>
    );
  }
}

Mask

Preview
Code

Mask Before 

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-17 20:29:33
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 21:34:23
 * @ Description: Examples of SkeletonLoader component with Mask.
 */

import React from 'react';
import { Text, StyleSheet } from 'react-native';
import Icon from '@flexnative/icons';
import { SKELETON_HEIGHT } from './constants';
import SkeletonLoader, { Circle, Rect } from '@flexnative/skeleton-loading';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block'>
        <SkeletonLoader width={'100%'} height={SKELETON_HEIGHT} beforeMask={<BeforeMask />}>
          <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>
      </div>
    );
  }
}

function BeforeMask() {
  const openAlert = () => console.log('BeforeMask clicked');
    
  return <Text style={styles.label}>
    Mask Before <Icon name="avatar" size={65} onPress={openAlert} />
  </Text>;
}

const styles = StyleSheet.create({
  label: {
    fontSize: 65,
    color: 'crimson'
  }
});

Playground

Live Editor

//Play with props to see live changes;

render(
  <SkeletonLoader width={'100%'} height={110} animate={true} backgroundColor='crimson' foregroundColor='#FFC436'>
    <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>
);

Result

Dependencies​

Installation​

API​

Component​

Properties​

Usecase Examples​

Default​

Colors​

Animation Speed​

Animation​

Animation Interval​

Mask​

Playground​