Custom Shimmer in React SPFx

In this article, we learn how to show custom shimmer in React SPFx we can display shimmer before items are rendered or loaded on the page. The shimmer effect enhances the user experience on the site and gives a professional feel to the end-user.

 

Custom Shimmer in React SPFx

 

What is Shimmer?

 

Shimmer is a Library that gives the loading effect to users and indicates that something is being loaded on the page.

There are many ways to display loading indicators on the page like loader but the shimmer is most popular in modern web applications and apps.

Have you ever noticed the shimmer effect on YouTube or Facebook just before their feed is being loaded? In the below screenshot I have captured from YouTube whenever you refresh the page the shimmer effect appears on the page for a few seconds just before the video thumbnails.

Shimmer on YouTube –

what is shimmer? How shimmer will look like

 

This is how shimmer will look you can customize the same using react shimmer Library according to your requirement.

 

Custom Shimmer in React SPFx with Example –

 

In the below example, I am creating one custom shimmer using react. Suppose you have to display data in fluent UI document cards and you want shimmer will come before rendering the actual data. Below is the shimmering screenshot of what actually we need to display –

 

shimmer effect example

 

This shows 12 rectangular tiles when a page or component is loading. And once data comes these tiles are replaced with actual data tiles.

 

Steps to implement custom shimmer in React SPFx –

 

  1. First, create the SPFx web part in your folder location using the below steps –
  •  Run the Yeoman SharePoint Generator command to create the spfx solution.
        yo @microsoft/sharepoint
  • Solution Name: Then selected the solution name let’s say “spfx-Shimmer-Effect” or type in any other name for your solution and Hit Enter.
  • Web part Name: Name the Web part let’s say “ShimmerEffect” and enter a description if you want and hit enter to proceed.
  • Framework: No JavaScript Framework, React, and Knockout. Select React.
  • Environment: Then select the Target environment for this demo I am going to create this web part for SharePoint online (latest).
  • Folder Option: Want to create the project in the same folder or create a new folder. Select the same folder.
  • Deployment option: Y or N. Select N for now, to deploy only on a particular site, not all the sites.
  • Require permission to access web APIs: Y or N option to choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant. Select N for now.
  • Project Type: Client-side web part or an extension. Choose the web part option.

 

2. Add the below CSS in your project .scss file.

.shimmerGroup > div
{
    display: block;
}

3. Import the below package in your web part .tsx file.

 

import { Shimmer, ShimmerElementsGroup, ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer';

 

4. Now copy the below methods as well in your .tsx file.

 

private _renderItems(): any {
    let _items = Array.apply(null, Array(12)).map(function () { return 0 });
    if (_items != undefined) {
      return _items.map(() => {
        return (
          <Shimmer className={"ms-Grid-col ms-sm12 ms-md6 ms-lg3"} isDataLoaded={false} customElementsGroup={this._getShimmerElements()}>
          </Shimmer>

        )
      });
    }
  }
  private _getShimmerElements = (): JSX.Element => {
    return (
      <div>
        <div className={styles.shimmerGroup}>
          <ShimmerElementsGroup
            shimmerElements={[
              { type: ShimmerElementType.line, width: "100%", height: 60 },
            ]}
          />
          <ShimmerElementsGroup
            shimmerElements={[
              { type: ShimmerElementType.gap, width: "100%", height: 30 },
            ]}
          />
        </div>
      </div>
    );
  }

 

5. Now call the “_renderitems()” method from the render method like below –

public render(): React.ReactElement<IShimmerEffectProps> {

    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;
    return (
      <div className="ms-Grid-row">
        {this._renderItems()}
      </div>
    );
  }

Note – The const is the default props you can remove the same and its dependencies.

 

6. Now run the “gulp serve” and check the rendering in the workbench it shows 12 tiles with shimmer effect because I have taken a dummy array of 12 elements in the “_renderitems” method.

 

There are a few points that are important and need to remember here –

  • You have to take one dummy array so that you can render the shimmer effect in your spfx web part.
  • Have you noticed the “isDataLoaded” property of shimmer control if it is false then it keeps showing the shimmer effect and if you set it to true means the shimmer effect will disappear and actual data will appear on the web part? So it’s better to create the same state the default value is false and as soon as your data is retrieved from the list or your data source set the state to true.
  • Since I have created a custom shimmer here I have called the “_getShimmerElements()” method from the “_renderItems()” method. This method has a line and gap. The line is the actual tiles where you can set height and width according to your requirement and the gap is the white space between lines.

 

<ShimmerElementsGroup
            shimmerElements={[
              { type: ShimmerElementType.line, width: "100%", height: 60 },
            ]}
          />
          <ShimmerElementsGroup
            shimmerElements={[
              { type: ShimmerElementType.gap, width: "100%", height: 30 },
            ]}
 />

 

 Conclusion

This is how you can show custom shimmer in react spfx web part. The shimmer gives a rich user experience in modern web applications and Apps.