@fortawesome/free-solid-svg-icons#faCircleNotch TypeScript Examples

BrandButton: React.FC<BrandButtonProps> = ({
    background = defaultProps.background,
    disabledBackground = defaultProps.disabledBackground,
    color = defaultProps.color,
    loading = false,
    children,
    className = "",
    ...rest
}) => {
    const indicator = loading ? <Icon icon={faCircleNotch} color={color} spin /> : null
    return (
        <Button
            background={background}
            color={color}
            disabledBackground={disabledBackground}
            className={className}
            {...rest}
        >
            {children}
            {indicator}
        </Button>
    )
}

function LoadingView(props: Props) {
  const { Root, styles } = useStyles(props);

  return (
    <Root>
      <div className={styles.container}>
        <h3 className={styles.title}>Loading…</h3>
        <FontAwesomeIcon icon={faCircleNotch} spin size="2x" />
      </div>
    </Root>
  );
}

Spinner: React.FC<SpinnerProps> = ({ className }) => {
    return (
        <div className={className}>
            <Icon icon={faCircleNotch} spin />
        </div>
    )
}

ReferralView: React.FC = observer(() => {
    const { referral, identity } = useStores()

    const { token, message, loading } = referral

    useEffect(() => {
        referral.generateToken()
    }, [identity.identity])

    const header =
        !token || message ? (
            <>
                <h2>No referral token is available at this time.</h2>
                <h3>Please try again later.</h3>
            </>
        ) : (
            <>
                <h2>Your referral code</h2>
                <Row>
                    <h1>{token}</h1>
                    <div style={{ marginLeft: "16px" }}>
                        <Clipboard text={token} size="2x" />
                    </div>
                </Row>
                <Row>
                    {facebookLink(token)}
                    {twitterLink(token)}
                </Row>
            </>
        )

    return (
        <Container>
            <Column>
                {loading ? (
                    <Spinner>
                        <IconSpin size="3x" icon={faCircleNotch} color="#fff" />
                    </Spinner>
                ) : (
                    header
                )}
            </Column>
        </Container>
    )
})

icons = {
  ok: <FontAwesomeIcon icon={faCheck} color="green"/>,
  error: <FontAwesomeIcon icon={faTimes} color="red"/>,
  loading: <FontAwesomeIcon icon={faCircleNotch} color="green" spin/>,
  empty: null
}

export default function RuntimeTools(props: {}) {
  const {loading} = useSelector((state: IStoreState) => state.autoSaveLoading);
  console.log('loading', loading);
  const loadingIcon = (
    <FontAwesomeIcon icon={faCircleNotch} spin color={'gray'}/>
  );
  const checkIcon = (
    <FontAwesomeIcon icon={faCheck} color={'red'}/>
  );
  const dispatch = useDispatch();
  const build = () => {
    dispatch(buildCode());
  };

  const run = () => {
    modal(cancel => (
      <div onClick={cancel}>
        Cancel
      </div>
    ));
  };

  const handleExport = () => {
    dispatch(exportCode());
  };

  return (
    <div className={style.run_tools}>
      <div className={style.label}>
        RUN TOOLS:
      </div>
      <div className={style.tools}>
        <button className={style.build_btn} onClick={build}>
          <FontAwesomeIcon icon={faGavel}/>
        </button>
        <button className={style.run_btn} onClick={run}>
          <FontAwesomeIcon icon={faPlay}/>
        </button>
        <button className={style.export_btn} onClick={handleExport}>
          <FontAwesomeIcon icon={faFileExport}/>
        </button>
        <button className={style.check_btn}>
          { loading ? loadingIcon : checkIcon }
        </button>
      </div>
    </div>
  );
}

IdentitySetup: React.FC = observer(function IdentitySetup() {
    const { onboarding, identity } = useStores()

    const handleCreateNew = async () => {
        await onboarding.createNewID()
    }
    const [importPrompt, setImportPrompt] = useState(false)
    const [importFilename, setImportFilename] = useState("")
    const handleImportExisting = async () => {
        const filename = await identity.importIdentityChooseFile()
        if (!filename) {
            return
        }
        setImportFilename(filename)
        setImportPrompt(true)
    }
    const handleImportSubmit = async ({ passphrase }: ImportIdentityFormFields) => {
        setImportPrompt(false)
        const res = identity.importIdentity({ filename: importFilename, passphrase })
        toast
            .promise(res, {
                loading: "Importing identity...",
                success: function successToast() {
                    return (
                        <span>
                            <b>Mysterium ID imported!</b>
                        </span>
                    )
                },
                error: function errorToast(reason) {
                    return (
                        <span>
                            <b>Mysterium ID import failed ?</b>
                            <br />
                            Error: {reason}
                        </span>
                    )
                },
            })
            .then(() => onboarding.finishIDSetup())
    }
    const handleImportCancel = () => {
        setImportPrompt(false)
    }
    return (
        <ViewContainer>
            <ViewNavBar />
            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <SectionIcon icon={faIdCardAlt} />
                        <Title>Mysterium ID</Title>
                        <Small>Your anonymous keys to access Mysterium Network.</Small>
                    </SideTop>
                    <SideBot>
                        <PrimarySidebarActionButton onClick={handleCreateNew}>
                            <ButtonContent>
                                <ButtonIcon>
                                    <FontAwesomeIcon icon={faUserPlus} />
                                </ButtonIcon>
                                Create New
                            </ButtonContent>
                        </PrimarySidebarActionButton>
                        <SecondarySidebarActionButton onClick={handleImportExisting}>
                            <ButtonContent>
                                <ButtonIcon>
                                    <FontAwesomeIcon icon={faFileImport} />
                                </ButtonIcon>
                                Import existing
                            </ButtonContent>
                        </SecondarySidebarActionButton>
                    </SideBot>
                </ViewSidebar>
                <Content>
                    <IdentityProgress>
                        {!!onboarding.identityProgress && (
                            <>
                                <FontAwesomeIcon icon={faCircleNotch} spin />
                                <IdentityProgress>{onboarding.identityProgress}</IdentityProgress>
                            </>
                        )}
                    </IdentityProgress>
                    <Lottie
                        play
                        loop={false}
                        animationData={animationIdentity}
                        style={{ width: 256, height: 256 }}
                        renderer="svg"
                    />
                </Content>
            </ViewSplit>
            <ImportIdentityPrompt visible={importPrompt} onSubmit={handleImportSubmit} onCancel={handleImportCancel} />
        </ViewContainer>
    )
})

function WebGLPageList(props: any) {
  const [hideContent, setHideContent] = useState(true);
  const [pages, setPages] = useState([] as PageType[]);
  const [loading, setLoading] = useState(false);
  const [name, setName] = useState('');
  const [disabled, setDisabled] = useState(true);

  const webGLPage = useSelector((state: IStoreState) => state.webGLPage);
  const user = useSelector((state: IStoreState) => state.user);
  const dispatch = useDispatch();

  useEffect(() => setName(webGLPage.name), [webGLPage.name]);

  const handleClick = () => {
    if (hideContent) {
      if (!user.email) return;
      setPages([]);
      setLoading(true);
      fetchAllPages(user.email).then(v => {
        if (!v.err) {
          const pages = v.pages as PageType[];
          setPages(pages);
          setLoading(false);
        }
      }).catch(e => {

      });
    }
    setHideContent(hideContent => !hideContent);
  };
  const canEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    setDisabled(false);
  }
  const handleModifyPageName = (e: React.MouseEvent) => {
    e.stopPropagation();
    modifyPageName(user.email, webGLPage.id, name).then(v => {
      console.log(v);
      if (!v.err) {
        setDisabled(true);
        return;
      }
      setDisabled(true);
    })
  }

  const elem = pages.length > 0 ? pages.map((v, i) => {
    const click = () => {
      fetchOnePage(user.email, v.pageId).then(res => {
        if (!res.err) {
          dispatch(selectWebGLPage(
            v.pageId,
            v.name,
            res.page.page,
            v.id
          ));
        }
      });
      handleClick();
    };
    return (<ResultItem name={v.name} key={i} onClick={click}/>);
  }).slice(0, 5) : (
    <div className={style.no_data}>
      <FontAwesomeIcon icon={faThermometerEmpty}/> No Data!
    </div>
  );
  const loadingElem = (
    <div className={style.loading}>
      <FontAwesomeIcon icon={faCircleNotch} spin/> loading...
    </div>
  );

  return (
    <div className={style.ui_page_store}>
      <div className={style.current_ui_page} onClick={handleClick}>
        <input type="text"
               className={cls(!disabled && style.active)}
               onClick={disabled ? () => {} : e => e.stopPropagation()}
               value={name}
               onChange={e => setName(e.target.value)}
               disabled={disabled}/>
        <span onClick={disabled ? canEdit : handleModifyPageName}>
          <FontAwesomeIcon icon={disabled ? faEdit : faCheck} color={disabled ? '#999999' : 'red'}/>
        </span>
      </div>
      <div className={cls(style.ui_page_search_panel, !hideContent && style.show)}>
        <div className={style.search}>
          <input type="text" placeholder="search page..."/>
          <button>
            <FontAwesomeIcon icon={faSearch}/>
          </button>
        </div>
        <ul className={style.ui_page_result}>
          {loading ? loadingElem : elem}
        </ul>
      </div>
    </div>
  );
}