LoadingStatus

The LoadingStatus context is used to set loading status across the FreeSewing web UI.

TIP

As with all React context, the provider should wrap the content in which you want to use the context.

When using one of the high-level wrappers like DocusaurusDoc or DocusaurusPage the context provider is already loaded.

Examples

Components

The LoadingStatus context provides the following components:

• LoadingStatusContext
• LoadingStatusContextProvider

LoadingStatusContext

This is the context itself to be passed to React.useContext().

import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'

const MyComponent = () => {
  const {
    loading,
    LoadingStatus,
    LoadingProgress,
    setLoadingStatus,
  } = useContext(LoadingStatusContext)

  // ...
}

The returned object holds the following:

context.loading

This is a boolean that is true when we are currently in a loading state, or false when not.

context.LoadingStatus

This is the component that renders the actual loading status message.

TIP

When using one of the high-level wrappers like DocusaurusDoc or DocusaurusPage the LoadingStatus component is already loaded. As such, so you typically do not need to use this.

context.LoadingProgress

This is a helper component to display a loading message with a progress bar. Although you still need to update the loading state yourself to generate a true progress example.

Name	Type	Description	Optional	Default Value
props	object	All component props	no	undefined
props.msg	string|JSX.Element	The loading message	yes	undefined
props.val	number	The current progress value	yes	0
props.max	number	The maximum progress value	yes	1

context.setLoadingStatus

This is the method to be used to set the loading status:

setLoadingStatus([
  show=false,
  msg=null,
  fade=true
  success=true,
])

LoadingStatusContextProvider

This is the context provider, it does not take any props apart from props.children.