import * as React from 'react' ; export interface SpinnerProps { size ? : number ; position ? : { x : number ; y : number ; } ; maxWidth ? : number ; statusText ? : string ; errorOccured ? : boolean ; } const CLASS_NAME = 'graph-explorer-spinner' ; export class Spinner extends React . Component < SpinnerProps , { } > { render ( ) { const { position = { x : 0 , y : 0 } , size = 50 , statusText , errorOccured , } = this . props ; const textLeftMargin = 5 ; const pathGeometry = 'm3.47,-19.7 a20,20 0 1,1 -6.95,0 m0,0 l-6,5 m6,-5 l-8,-0' + ( errorOccured ? 'M-8,-8L8,8M-8,8L8,-8' : '' ) ; return ( < g className = { CLASS_NAME } data - error = { errorOccured } transform = { `translate(${ position . x },${ position . y })` } > < g className = { `${ CLASS_NAME }__arrow` } > < path d = { pathGeometry } transform = { `scale(0.02)scale(${ size })` } fill = "none" stroke = { errorOccured ? 'red' : 'black' } strokeWidth = "3" strokeLinecap = "round" / > < /g> < text style = { { dominantBaseline : 'middle' } } x = { size / 2 + textLeftMargin } > { statusText } < /text> < /g>); } } export class HtmlSpinner extends React . Component < { width : number ; height : number ; } , { } > { render ( ) { const { width , height } = this . props ; const size = Math . min ( width , height ) ; return ( < svg width = { width } height = { height } > < Spinner size = { size } position = { { x : width / 2 , y : height / 2 } } /> < /svg>); } }