packageDocumentation module import "./LoadingSpinner.scss" ; import * as React from "react" ; import { ProgressRadial , ProgressRadialProps } from "@itwin/itwinui-react" ; import { SpinnerSize } from "./Spinner" ; public export type RadialSizeType = ProgressRadialProps [ "size" ] ; public export interface LoadingSpinnerProps extends Omit < ProgressRadialProps , "size" > { /** Message (text) displayed */ message ? : string ; /** Position the message above or below the spinner (defaults to bottom) */ messageOnTop ? : boolean ; default size ? : RadialSizeType | SpinnerSize ; } public export class LoadingSpinner extends React . PureComponent < LoadingSpinnerProps > { public static defaultProps : Partial < LoadingSpinnerProps > = { messageOnTop : false } ; public override render ( ) { const { message , messageOnTop , size , ... rest } = this . props ; type SizeType = LoadingSpinnerProps [ "size" ] ; const getRadialSize = ( sizeProp ) => { if ( sizeProp === undefined || typeof sizeProp === "string" ) return sizeProp ; else { switch ( sizeProp ) { case SpinnerSize . Large : case SpinnerSize . XLarge : return "large" ; case SpinnerSize . Small : return "x-small" ; } } return undefined ; } ; return ( < div className = "core-ls" > { ( message && messageOnTop ) && < span className = "ls-message-top" > { message } < /span>} < ProgressRadial size = { getRadialSize ( size ) } { ... rest } indeterminate / > { ( message && ! messageOnTop ) && < span className = "ls-message-bottom" > { message } < /span>} < /div>); } }