SPFx with Fluent UI Spinner and Message bar

Quite simple and a basic one. In every SPFx webpart we do data load/retrieve action and while the code does it user experience is blank so its good to show a loading/progress animation and a message after success.

Lets do that with:

• Fluent UI Spinner
• Fluent UI Message bar

To demonstrate it we will add a list item using text box and a button. with a spinner to show user that adding is in progress and a final success message after the item is added to the list.

import * as React from 'react';
import styles from './Spinner.module.scss';
import { ISpinnerProps } from './ISpinnerProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react/lib/Stack';
import { PrimaryButton} from 'office-ui-fabric-react';
import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
import { Link, MessageBar, MessageBarType } from 'office-ui-fabric-react';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export interface ISpinnerState{
  isLoading: boolean;
  isSuccess: boolean;
}
const stackTokens = { childrenGap: 50 };
const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
const columnProps: Partial<IStackProps> = {
  tokens: { childrenGap: 15 },
  styles: { root: { width: 300 } },
};
export default class Spinners extends React.Component<ISpinnerProps, ISpinnerState> {
  constructor(props: ISpinnerProps) {
    super(props);
    this.state = {
      isLoading: false,
      isSuccess: false
    };
  }

  public render(): React.ReactElement<ISpinnerProps> {
    const { isLoading,isSuccess } = this.state;    
    return (
      <> 
      {isSuccess === true && <MessageBar messageBarType={MessageBarType.success} isMultiline={false} >
        Successfully added item to sharepoint list.
        <Link href="www.bing.com" target="_blank">
          Visit our website.
        </Link>
      </MessageBar>}  
      <Stack horizontal tokens={stackTokens} styles={stackStyles}> 
      <Stack {...columnProps}> 
        {isLoading ? (<Spinner label="Adding Please wait..." ariaLive="assertive" labelPosition="bottom" />):(
          <TextField id="Title" label="Title" />
        )}        
        <PrimaryButton text="Add Item" onClick={this._addItem} allowDisabledFocus />
      </Stack>
    </Stack>   
    </>
    );
  }

  private _addItem= async()=>{
    // enable loading
    this.setState({
      isLoading: true
    });

    // add an item to the list
    await sp.web.lists.getByTitle("People").items.add({
      Title: document.getElementById('Title')["value"]
    });

    // disable loading and enable success message bar
    this.setState({
      isLoading: false,isSuccess:true
    });

    // hide the success message bar after 2second
    setTimeout(() => {
      this.setState({ isSuccess: false });
    }, 2000);
  }
}