@material-ui/core#CircularProgress TypeScript Examples

Processing = ({ isProcessing }: { isProcessing: boolean }) => {
	if (isProcessing) {
		return (
			<Box
				zIndex="tooltip"
				position="fixed"
				display="flex"
				justifyContent="center"
				alignItems="center"
				top={0}
				bottom={0}
				left={0}
				right={0}
				style={{
					background: "rgba(0, 0, 0, 0.2)",
					// backdropFilter: "blur(2px)"
				}}
			>
				<CircularProgress />
			</Box>
		)
	}
	return <></>
}

Home: React.FunctionComponent<IHomeProps> = ({}) => {
  const { data: dashboardData, status } = useDashboardData();
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();

  return (
    <>
      <Helmet title="Dashboard" />
      <div className={clsx("container")}>
        {dashboardData ? (
          <>
            <Dashboard dashboardData={dashboardData} />

            <div className="row mt-5">
              <div
                className={clsx("col-12", classes.refreshDate, {
                  "text-center": mediaQuery.smallScreen
                })}
              >
                Last updated: <FormattedDate value={dashboardData.now.date} /> <FormattedTime value={dashboardData.now.date} />
              </div>
            </div>
          </>
        ) : (
          <div className="text-center">
            <CircularProgress size={80} />
          </div>
        )}
      </div>
    </>
  );
}

WithIcon = () => (
  <Layout>
    <TextButton>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </TextButton>
    <ActionButton>
      <CircularProgress
        size="1.5rem"
        style={{ color: 'currentColor', marginRight: 10 }}
      />
      BUTTON
    </ActionButton>
    <BorderButton>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </BorderButton>
    <TextButton disabled>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </TextButton>
    <ActionButton disabled>
      <CircularProgress
        size="1.5rem"
        style={{ color: 'currentColor', marginRight: 10 }}
      />
      BUTTON
    </ActionButton>
    <BorderButton disabled>
      <Send style={{ marginRight: 10 }} />
      BUTTON
    </BorderButton>
  </Layout>
)

export default function Loading({
  message = "Loading",
  fullScreen = false,
}: ILoading) {
  const classes = useStyles({});

  return (
    <Grid
      container
      className={classes.root}
      direction="column"
      justify="center"
      alignItems="center"
      component={fullScreen ? Div100vh : "div"}
      style={{ height: fullScreen ? "100rvh" : "100%" }}
    >
      <Grid item className={classes.content}>
        <CircularProgress className={classes.progress} />
        <Typography
          variant="h6"
          className={classes.message}
          color="textSecondary"
        >
          {message}
        </Typography>
      </Grid>
    </Grid>
  );
}

autocompleteInputProps = (params: AutocompleteRenderInputParams, loading: boolean): InputProps => {
  return {
    ...params.InputProps,
    endAdornment: (
      <>
        {loading ? <CircularProgress color='inherit' size={20} /> : null}
        {params.InputProps.endAdornment}
      </>
    ),
  }
}

export default function Game({ game, players, isCzar, onWinnerSelect, maxChildHeight }: GameProps) {
  const [gameState, setGameState] = useState<string | null>(null);
  useEffect(() => {
    if (game?.state) {
      setGameState(game.state);
    }
  }, [game]);

  function renderBasedOnGameState() {
    switch (gameState) {
      case GameState.TURN_SETUP:
        return <TurnSetup game={game} players={players} />;
      case GameState.PICKING_CARDS:
        return <PickingCards game={game} />;
      case GameState.SELECTING_WINNER:
        return <SelectingWinner game={game} onWinnerSelect={onWinnerSelect} isCzar={isCzar} maxChildHeight={maxChildHeight} />;
      case GameState.ENEDED:
        return <GameEnded game={game} players={players} />;
      default:
        return <div className="generic-cards-wrapper">
          <GenericGardGroup
            leftCardText="You have recently joined"
            leftCardChild={<CircularProgress color="inherit" />}
            rightCardText="You will join in a few seconds."
          />
        </div>
    }
  }
  return <div className="game-container game-content">
    {renderBasedOnGameState()}
  </div >
}

Messages: React.FC<PropsMessages> = props => {
  useEffect(() => {
    const chatElement = document.getElementById('chat');
    if (chatElement) {
      chatElement.scrollTop = chatElement.scrollHeight;
    }
  });

  return (
    <div id="chat" className={styles.container} onClick={props.onClick}>
      {props.loading ? (
        <div className={styles.loading}>
          <CircularProgress />
        </div>
      ) : (
        <div className={styles.wrapper}>
          {props.messages.map(message => (
            <Message
              _id={message._id}
              key={message._id}
              username={message.username}
              text={message.text}
              image={message.image}
              date={message.date}
            />
          ))}
        </div>
      )}
    </div>
  );
}

Loader: React.SFC<IProps> = ({ classes, isOpen, setOpen, numTxs, pendingText }) => {
  const text = 'This action may take a few moments to process. ';
  const txText = `You will need to confirm ${numTxs} transactions with MetaMask.`;
  return (
    <Modal
      handleClick={() => (typeof numTxs !== 'undefined' && numTxs > 0 ? null : setOpen(false))}
      isOpen={isOpen}
    >
      <>
        <ModalTitle>{'Just a Moment'}</ModalTitle>
        <Copy fontSize={1} textAlign="left">
          {text}
          {numTxs ? txText : null}
          {pendingText && `\nUnder the hood: ${pendingText}`}
        </Copy>
        <CircularProgress className={classes.progress} />
      </>
    </Modal>
  );
}

CenteredCircularProgress = () => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <CircularProgress className={classes.loadingElem} size={30} />
        </div>
    );
}

Transaction: React.FC<TransactionProps> = ({ hash }) => {
  const classes = useStyles();
  const { chainId } = useActiveWeb3React();
  const allTransactions = useAllTransactions();

  const tx = allTransactions?.[hash];
  const summary = tx?.summary;
  const pending = !tx?.confirmedTime;
  const success =
    !pending &&
    tx &&
    tx.receipt &&
    (tx.receipt.status === 1 || typeof tx.receipt.status === 'undefined');

  if (!chainId) return null;

  return (
    <Box className={classes.transactionState}>
      <a
        className={classes.transactionStatusText}
        href={getEtherscanLink(chainId, hash, 'transaction')}
        target='_blank'
        rel='noopener noreferrer'
      >
        {summary ?? hash} ↗
      </a>
      <Box className={classes.iconWrapper}>
        {pending ? (
          <CircularProgress size={16} />
        ) : success ? (
          <CheckCircle size='16' />
        ) : (
          <Triangle size='16' />
        )}
      </Box>
    </Box>
  );
}

ModActionProgress = ({ modUniqueName }: Props) => {
  const styles = useStyles();
  const progress = useRecoilValue(modProgressState(modUniqueName));

  return (
    <CircularProgress
      variant="determinate"
      value={progress * 100}
      color="primary"
      size={24}
      thickness={23}
      className={styles.circularProgress}
    />
  );
}

UploadButton = ({ loading, onUpload }: UploadButtonProps) => {
  const classes = useStyles();

  return (
    <Box mt={2} display="flex">
      <Button
        color="primary"
        variant="outlined"
        className={classes.root}
        onClick={onUpload}
        disabled={loading}
      >
        {loading ? (
          <CircularProgress color="inherit" size={24.5} />
        ) : (
          "UPLOAD FILES"
        )}
      </Button>
    </Box>
  );
}

Loader: React.VFC<LoaderProps> = ({ fullHeight }) => {
  const node = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    if (process.browser && fullHeight && node.current != null) {
      setHeight(
        window.innerHeight -
          (document.querySelector('header')?.offsetHeight ?? 0) -
          (document.querySelector('footer')?.offsetHeight ?? 0),
      );
    }
  }, [fullHeight]);

  return (
    <Box
      ref={node}
      sx={{
        alignItems: 'center',
        display: 'flex',
        height: fullHeight ? height : 'auto',
        justifyContent: 'center',
      }}
    >
      <CircularProgress />
    </Box>
  );
}

NextButton = (
  props: ComponentProps<typeof Button> & { loading?: boolean },
) => {
  const { loading, ...buttonProps } = props;
  const classes = useStyles();

  return (
    <div className={classes.wrapper}>
      <Button
        color="primary"
        variant="contained"
        {...buttonProps}
        disabled={props.disabled || props.loading}
      />
      {props.loading && (
        <CircularProgress size="1.5rem" className={classes.buttonProgress} />
      )}
      {props.loading}
    </div>
  );
}

export function SharedLoader(props: { loadingTxt: string }) {
  return (
    <div
      style={{
        textAlign: "center",
        paddingTop: "10px",
        paddingBottom: "10px",
      }}
    >
      <CircularProgress variant={"indeterminate"} />
      <p
        style={{
          fontFamily: "sans-serif",
        }}
      >
        {props.loadingTxt}
      </p>
    </div>
  );
}

render() {
    const { isSubmitting, children, ...buttonProps } = this.props;
    return (
      <Button
        ref={this.props.buttonRef}
        {...buttonProps}
        className={classNames(buttonProps.className)}
        disabled={isSubmitting || buttonProps.disabled}
        onClick={e => {
          this.setState({ clicked: true });
          buttonProps.onClick && buttonProps.onClick(e)
        }}
        style={{
          ...buttonProps.style,
          position: 'relative',
        }}
      >
        {(this.state.clicked && this.props.isSubmitting) && (
          <CircularProgress
            color={buttonProps.color !== 'default' && buttonProps.color || 'inherit'}
            size={24}
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              marginTop: -12,
              marginLeft: -12,
            }}
          />
        )}
        {children}
      </Button>
    );
  }

PageLoading = () => {
  const delay = 200; // 200ms
  const [showLoadingIndicator, setLoadingIndicatorVisibility] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setLoadingIndicatorVisibility(true), delay);

    // this will clear Timeout when component unmont like in willComponentUnmount
    return () => {
      clearTimeout(timer);
    };
  });

  return showLoadingIndicator ? (
    <FixWrapper>
      <Wrapper>
        <CircularProgress />
      </Wrapper>
    </FixWrapper>
  ) : null;
}

ProposalsTable: React.FC<Props> = ({
  status,
  proposals,
  isLoading,
}) => {
  const theme = useTheme();
  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <ResponsiveTableContainer>
      {!isMobileSmall ? (
        <TableHeader container direction="row">
          <Grid item xs={3}>
            <ProposalTableHeadText>
              {`${status || "All"} proposals`.toUpperCase()}
            </ProposalTableHeadText>
          </Grid>
        </TableHeader>
      ) : null}

      {proposals.map((proposal, i) => (
        <ProposalTableRow key={`proposal-${i}`} proposal={proposal} />
      ))}

      {proposals.length === 0 ? (
        <NoProposals variant="subtitle1" color="textSecondary">
          No {status ? status : ""} proposals
        </NoProposals>
      ) : null}

      {isLoading && (
        <LoaderContainer container direction="row" justify="center">
          <CircularProgress color="secondary" />
        </LoaderContainer>
      )}
    </ResponsiveTableContainer>
  );
}

export default function StatusIcon({ checkState, size, className, isLoading }: Props): ReactElement {
  const s = size || '1rem'

  if (isLoading) return <CircularProgress size={s} className={className} />

  let backgroundColor: string
  switch (checkState) {
    case CheckState.OK:
      backgroundColor = '#1de600'
      break
    case CheckState.WARNING:
      backgroundColor = 'orange'
      break
    case CheckState.ERROR:
      backgroundColor = '#ff3a52'
      break
    default:
      // Default is error
      backgroundColor = '#ff3a52'
  }

  return (
    <span
      className={className}
      style={{
        backgroundColor,
        height: s,
        width: s,
        borderRadius: '50%',
        display: 'inline-block',
      }}
    />
  )
}

RepoSearchBox: FC<RepoSearchBoxProps> = ({
  isLoading,
  options,
  selectedRepo,
  setSelectedRepo,
}) => (
  <Autocomplete
    loading={isLoading}
    options={options}
    id="search-repos"
    renderInput={(params) => (
      <TextField
        variant="outlined"
        label="Search"
        {...params}
        InputProps={{
          ...params.InputProps,
          endAdornment:
            isLoading && !selectedRepo ? (
              <Box
                maxWidth={24}
                maxHeight={24}
                ml={1}
                component={CircularProgress}></Box>
            ) : null,
        }}
      />
    )}
    groupBy={(r) => r.owner}
    getOptionLabel={(r) => r.name}
    getOptionSelected={(first, second) => first.id === second.id}
    value={selectedRepo}
    autoHighlight
    onChange={(_, value) => setSelectedRepo(value)}
  />
)

Button: React.SFC<ButtonProps> = ({
  type = 'button',
  loading = false,
  disabled = false,
  ...props
}) => {
  let buttonColor = null;
  const { variant, color, onClick, className, children, ...rest } = props;

  if (variant === 'outlined') buttonColor = styles.ButtonColor;

  return (
    <ButtonElement
      variant={variant}
      color={color}
      onClick={onClick}
      data-testid={rest['data-testid']}
      className={`${styles.Button} ${className} ${buttonColor}`}
      disabled={loading || disabled}
      type={type}
    >
      {children}
      {loading && <CircularProgress size={28} className={styles.buttonProgress} />}
    </ButtonElement>
  );
}

LoadingComponent: React.FC<LoadingComponentProps> = (props) => {
	const { children, loading, customLoadingElement } = props

	const classes = useStyles()

	let component

	if (loading) {
		if (customLoadingElement) {
			component = customLoadingElement
		} else {
			component = (
				<Grid
					container
					justify="center"
					alignItems="center"
					className={classes.defaultLoadingContainer}
				>
					<CircularProgress color="primary" />
				</Grid>
			)
		}
	} else {
		component = (
			<Fade in={!loading}>
				{children}
			</Fade>
		)
	}

	return component
}

public render(): JSX.Element {
    if (!this.state.execution || !this.state.events) {
      return <CircularProgress />;
    }

    return (
      <div>
        {
          <ResourceInfo
            resourceType={ResourceType.EXECUTION}
            typeName={this.fullTypeName}
            resource={this.state.execution}
          />
        }
        <SectionIO
          title={'Declared Inputs'}
          artifactIds={this.state.events[Event.Type.DECLARED_INPUT]}
          artifactTypeMap={this.state.artifactTypeMap}
        />
        <SectionIO
          title={'Inputs'}
          artifactIds={this.state.events[Event.Type.INPUT]}
          artifactTypeMap={this.state.artifactTypeMap}
        />
        <SectionIO
          title={'Declared Outputs'}
          artifactIds={this.state.events[Event.Type.DECLARED_OUTPUT]}
          artifactTypeMap={this.state.artifactTypeMap}
        />
        <SectionIO
          title={'Outputs'}
          artifactIds={this.state.events[Event.Type.OUTPUT]}
          artifactTypeMap={this.state.artifactTypeMap}
        />
      </div>
    );
  }

Loading: React.FC = () => {
  const styles = useStyles();

  return (
    <div className={styles.root}>
      <CircularProgress />
    </div>
  );
}

function App() {
  const { connections } = useConnections([connectionDetails1, connectionDetails2]);

  if (isEmpty(connections)) {
    return (
      <Backdrop open>
        <CircularProgress color="inherit" />
      </Backdrop>
    );
  }

  return (
    <SourceTargetContextProvider connections={connections}>
      <KeyringContextProvider>
        <SubscriptionsContextProvider>
          <GUIContextProvider>
            <ApiCallsContextProvider>
              <AccountContextProvider>
                <MessageContextProvider>
                  <SnackbarProvider>
                    <TransactionContextProvider>
                      <BrowserRouter>
                        <Switch>
                          <Route path={'/'}>
                            <Main />
                          </Route>
                        </Switch>
                      </BrowserRouter>
                    </TransactionContextProvider>
                  </SnackbarProvider>
                </MessageContextProvider>
              </AccountContextProvider>
            </ApiCallsContextProvider>
          </GUIContextProvider>
        </SubscriptionsContextProvider>
      </KeyringContextProvider>
    </SourceTargetContextProvider>
  );
}

Spinner = ({ loading }: Props) => (
  <Fade
    in={loading}
    style={{
      transitionDelay: loading ? "800ms" : "0ms",
    }}
    unmountOnExit
    css={css`
      padding: 0.5rem;
    `}
  >
    <CircularProgress />
  </Fade>
)

PaginationButtons = () => {
  const classes = useStyles();
  const {
    activeStep,
    handleBack,
    handleNext,
    checkStepValid,
    loading,
    setLoading,
  } = useContext(StepContext);

  const stepValid = checkStepValid(activeStep);

  return (
    <div className={classes.buttons}>
      {activeStep !== 0 && (
        <Button onClick={handleBack} className={classes.button}>
          Back
        </Button>
      )}
      {loading ? (
        <CircularProgress size={20} color="secondary" />
      ) : (
        <Button
          variant="contained"
          color="primary"
          onClick={(e: MouseEvent) => {
            setLoading(true);
            handleNext(e);
          }}
          className={classes.button}
          disabled={!stepValid}
        >
          {activeStep === STEPS.length - 1 ? 'Submit' : 'Next'}
        </Button>
      )}
    </div>
  );
}

export default function FetchVariationsButton() {
    const styles = useStyles();
    const dispatch = useDispatch();
    const isLoading = useSelector(selectVariationsLoadingStatus);
    const fetchOutputs = () => {
        dispatch(fetchVariationsAsync());
    };
    return (
        <Button variant="contained" size="large" color="primary" onClick={fetchOutputs}
                disabled={isLoading}
        >{isLoading && (
            <CircularProgress size={24} className={styles.buttonProgress}/>
        )} Generate</Button>
    );
}

ProjectHistory: React.FC<Props> = ({ match }) => {
  const [showMenu, setShowMenu] = useState(false);
  const { history, loading, error } = useSelector((state: RootState) => state.projectHistory);
  const dispatch = useDispatch();
  const { getAccessTokenSilently } = useAuth0();

  useEffect(() => {
    (async () => {
      const token = await getAccessTokenSilently();
      dispatch(getProjectHistory(token, match.params.projectId));
    })();
  }, [dispatch, getAccessTokenSilently, match.params.projectId]);

  return (
    <>
      <LeftSideBar showMenu={showMenu} onCloseMenu={() => setShowMenu(false)} />
      <div className='flex flex-col flex-grow'>
        <TopFilter onOpenMenu={() => setShowMenu(!showMenu)} type={topFilterType.HISTORY} title='Project History' />
        {
          loading
            ? <div className='flex items-center justify-center flex-1'><CircularProgress color="primary" /></div>
            : error
              ? <div className='flex items-center justify-center flex-1'>{error}</div>
              : !history.length
                ? <div className='flex items-center justify-center flex-1'>
                  No History yet.
                </div>
                : <div className='flex flex-col flex-1 overflow-y-scroll pb-20'>
                  {React.Children.toArray(history.map((hist: User_Populated_History) =>
                    <HistoryRow history={hist} />
                  ))}
                </div>
        }
      </div>
    </>
  );
}