react-icons/fa#FaSpinner TypeScript Examples

Button: React.FC<ButtonProps> = ({
  variant = "primary",
  disabled,
  width,
  icon: Icon,
  children,
  type,
  isLoading,
  ...props
}) => (
  <StyledButton
    variant={variant}
    disabled={disabled || isLoading}
    width={width}
    {...props}
  >
    {isLoading ? (
      <FaSpinner data-testid="icon" className="button__icon spin" />
    ) : (
      Icon && <Icon data-testid="icon" className="button__icon" />
    )}
    <span>{children}</span>
  </StyledButton>
)

IconButton: React.FC<IIconButton> = ({
  icon,
  isLoading,
  onClick,
  disabled,
}) => {
  return (
    <StyledIconButton
      disabled={disabled || isLoading}
      className="icon__button"
      onClick={onClick}
    >
      {isLoading ? <FaSpinner className="spin" /> : icon}
    </StyledIconButton>
  );
}

render (): React.ReactNode {
    if (this.overviewViewer !== undefined) {
      this.overviewViewer.render({
        container: this.overviewViewport.current
      })
      this.overviewViewer.resize()
    }
    const attributes = []
    const description = this.props.slide.description
    if (description != null && description !== '') {
      attributes.push({
        name: 'Description',
        value: description
      })
    }
    if (this.state.isLoading) {
      return (<FaSpinner />)
    }

    /* Properties need to be propagated down to Menu.Item:
     * https://github.com/react-component/menu/issues/142
     */
    return (
      <Menu.Item
        style={{ height: '100%' }}
        key={this.props.slide.seriesInstanceUIDs[0]}
        {...this.props}
      >
        <Description
          header={this.props.slide.containerIdentifier}
          attributes={attributes}
          selectable
        >
          <div style={{ height: '100px' }} ref={this.overviewViewport} />
        </Description>
      </Menu.Item>
    )
  }

MessageAction: IMessageAction = ({ loading, children }) => {
  return <>{loading ? <FaSpinner className="spin" /> : children}</>;
}

render (): React.ReactNode {
    const appInfo = {
      name: this.props.name,
      version: this.props.version,
      homepage: this.props.homepage,
      uid: '1.2.826.0.1.3680043.9.7433.1.5',
      organization: this.props.config.organization
    }

    const enableWorklist = !(
      this.props.config.disableWorklist ?? false
    )
    const enableAnnotationTools = !(
      this.props.config.disableAnnotationTools ?? false
    )
    const enableServerSelection = (
      this.props.config.enableServerSelection ?? false
    )

    let worklist
    if (enableWorklist) {
      worklist = <Worklist client={this.state.client} />
    } else {
      worklist = <div>Worklist has been disabled.</div>
    }

    let isLogoutPossible = false
    let onLogout: () => void
    if (
      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
      this.props.config.oidc != null &&
      this.props.config.oidc.endSessionEndpoint != null
    ) {
      onLogout = (): void => {
        if (this.auth != null) {
          // eslint-disable-next-line @typescript-eslint/no-floating-promises
          this.auth.signOut()
        }
      }
      isLogoutPossible = true
    } else {
      onLogout = () => {}
      isLogoutPossible = false
    }

    const layoutStyle = { height: '100vh' }
    const layoutContentStyle = { height: '100%' }

    if (this.state.redirectTo !== undefined) {
      return (
        <BrowserRouter basename={this.props.config.path}>
          <Redirect push to={this.state.redirectTo} />
        </BrowserRouter>
      )
    } else if (this.state.isLoading) {
      return (
        <BrowserRouter basename={this.props.config.path}>
          <Layout style={layoutStyle}>
            <Header
              app={appInfo}
              user={this.state.user}
              showWorklistButton={false}
              onServerSelection={this.handleServerSelection}
              showServerSelectionButton={false}
            />
            <Layout.Content style={layoutContentStyle}>
              <FaSpinner />
            </Layout.Content>
          </Layout>
        </BrowserRouter>
      )
    } else if (!this.state.wasAuthSuccessful) {
      return (
        <InfoPage type='error' message='Sign-in failed.' />
      )
    } else if (this.state.error != null) {
      return (
        <InfoPage type='error' message={this.state.error.message} />
      )
    } else {
      return (
        <BrowserRouter basename={this.props.config.path}>
          <Switch>
            <Route
              path='/studies/:StudyInstanceUID'
              render={(routeProps) => (
                <Layout style={layoutStyle}>
                  <Header
                    app={appInfo}
                    user={this.state.user}
                    showWorklistButton={enableWorklist}
                    onServerSelection={this.handleServerSelection}
                    onUserLogout={isLogoutPossible ? onLogout : undefined}
                    showServerSelectionButton={enableServerSelection}
                  />
                  <Layout.Content style={layoutContentStyle}>
                    <CaseViewer
                      client={this.state.client}
                      user={this.state.user}
                      annotations={this.props.config.annotations}
                      preload={this.props.config.preload}
                      app={appInfo}
                      enableAnnotationTools={enableAnnotationTools}
                      studyInstanceUID={routeProps.match.params.StudyInstanceUID}
                    />
                  </Layout.Content>
                </Layout>
              )}
            />
            <Route exact path='/logout'>
              <Layout style={layoutStyle}>
                <Header
                  app={appInfo}
                  user={this.state.user}
                  showWorklistButton={false}
                  onServerSelection={this.handleServerSelection}
                  onUserLogout={isLogoutPossible ? onLogout : undefined}
                  showServerSelectionButton={enableServerSelection}
                />
                Logged out
              </Layout>
            </Route>
            <Route exact path='/'>
              <Layout style={layoutStyle}>
                <Header
                  app={appInfo}
                  user={this.state.user}
                  showWorklistButton={false}
                  onServerSelection={this.handleServerSelection}
                  onUserLogout={isLogoutPossible ? onLogout : undefined}
                  showServerSelectionButton={enableServerSelection}
                />
                <Layout.Content style={layoutContentStyle}>
                  {worklist}
                </Layout.Content>
              </Layout>
            </Route>
          </Switch>
        </BrowserRouter>
      )
    }
  }