@ant-design/icons#LoadingOutlined TypeScript Examples

function DownloadCsv(props: any) {
  const [getCsv, {loading, error, data}] = useLazyQuery<
    GetCsvResponses,
    GetCsvResponsesVariables
  >(GET_CSV);

  if (error) {
    console.error(error);
    message.error('Internal error: could not generate CSV');
  }

  return data ? (
    <Tooltip title="Download CSV">
      <CSVLink data={makeCsv(data)} filename={`${props.title}.csv`}>
        <Button type="link" icon={<DownloadOutlined />} />
      </CSVLink>
    </Tooltip>
  ) : (
    <Tooltip title="Generate CSV">
      <Button
        type="link"
        icon={loading ? <LoadingOutlined /> : <FileExcelOutlined />}
        onClick={() => getCsv({variables: {id: props.id}})}
      />
    </Tooltip>
  );
}

SubjectList = memo(
  ({
    viewpointId,
    viewpointType,
    dataSource,
    loading,
    onToDetail,
  }: SubjectListProps) => {
    const t = useI18NPrefix('permission');

    const { filteredData, debouncedSearch } = useDebouncedSearch(
      dataSource,
      (keywords, d) => d.name.includes(keywords),
    );
    return (
      <>
        <Searchbar placeholder={t('search')} onSearch={debouncedSearch} />
        <List
          loading={{
            spinning: loading,
            indicator: <LoadingOutlined />,
          }}
        >
          {filteredData?.map(({ id, name, type }) => (
            <StyledListItem
              key={id}
              selected={viewpointId === id && viewpointType === type}
              onClick={onToDetail(id, type)}
            >
              <List.Item.Meta title={name} />
            </StyledListItem>
          ))}
        </List>
      </>
    );
  },
)

PostModals: React.FC<IProps> = (props) => {
    return (
        <Suspense fallback={<LoadingOutlined className="text-gray-800 dark:text-white" />}>
            <DeletePostModal deleteSuccessCallback={props.deleteSuccessCallback} />
            <EditPostModal updateSuccessCallback={props.updateSuccessCallback} />
            <PostLikesModal />
        </Suspense>
    );
}

export function Tree({ loading, treeData, ...treeProps }: TreeProps) {
  return (
    <Wrapper
      className={classnames({ container: loading || !treeData?.length })}
    >
      {loading ? (
        <LoadingOutlined />
      ) : (
        treeData &&
        (treeData.length ? (
          <StyledDirectoryTree
            showIcon
            blockNode
            treeData={treeData}
            {...treeProps}
          />
        ) : (
          <Empty />
        ))
      )}
    </Wrapper>
  );
}

private operationButton = (phase: PlayerPhase): React.ReactNode => {
        switch (phase) {
            case PlayerPhase.Playing: {
                return <img src={video_pause}/>;
            }
            case PlayerPhase.Buffering: {
                return <LoadingOutlined style={{fontSize: 14, color: "#7A7B7C"}}/>;
            }
            default: {
                return <img style={{marginLeft: 2}} src={video_play}/>;
            }
        }
    }

BoardPageItem: React.FC<BoardPageItemProps> = memo(
  ({ boardId }) => {
    const dashboard = useSelector((state: { board: BoardState }) =>
      makeSelectBoardConfigById()(state, boardId),
    );

    if (!dashboard)
      return (
        <div>
          loading <LoadingOutlined />
        </div>
      );
    let boardType = dashboard?.config?.type;
    return (
      <BoardInitProvider
        board={dashboard}
        editing={false}
        autoFit={false}
        renderMode="share"
      >
        <Wrapper>
          {boardType === 'auto' && <AutoBoardCore boardId={dashboard.id} />}
          {boardType === 'free' && <FreeBoardCore boardId={dashboard.id} />}
          <FullScreenPanel />
        </Wrapper>
      </BoardInitProvider>
    );
  },
)

commonNoValueRender = (loading: boolean, fileType: string) => (
  <div className={styles.button}>
    {loading ? <LoadingOutlined/> : null}
    <img src={uploadimage} style={{width: 80, height: 50}}/>
    {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
    <p>请上传{fileMap[fileType].accept}格式</p>
    {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
    <p>不超过{fileMap[fileType].limitSize}M的文件 </p>
    <Button style={{marginTop: 10}}>上传{fileType}</Button>
  </div>
)

function RunAction({
  id,
  action,
  onFinish,
  icon,
}: {
  id: string;
  action: () => Promise<boolean>;
  onFinish?: () => void;
  icon: JSX.Element;
}) {
  const [state, setRunState] = useState<RunActionState>(
    RunActionState.NotRunning,
  );

  useMemo(() => setRunState(RunActionState.NotRunning), [id]);

  const run = async () => {
    await setRunState(RunActionState.Running);
    const result = await action();
    if (result) {
      await setRunState(RunActionState.Success);
      setTimeout(() => (onFinish ? onFinish() : null), 2000); // Give user a sense of completion before removal from list
    } else {
      await setRunState(RunActionState.Failed);
    }
  };

  let component;
  switch (state) {
    case RunActionState.NotRunning:
      component = (
        <span className="hover-button" onClick={run}>
          {icon}
        </span>
      );
      break;
    case RunActionState.Failed:
      component = (
        <span className="hover-button" onClick={run}>
          <SyncOutlined />
        </span>
      );
      break;
    case RunActionState.Running:
      component = <LoadingOutlined />;
      break;
    case RunActionState.Success:
      component = <CheckCircleTwoTone twoToneColor="#52c41a" />;
  }

  return component;
}

CenteredSpinner: React.FC = () => (
	<CenteredWrapper style={{ background: 'transparent' }}>
		<Spin indicator={<LoadingOutlined style={{ fontSize: 48 }} spin />} />
	</CenteredWrapper>
)

SourceEditorViewSteps: React.FC<SourceEditorTabsViewProps> = ({
  steps,
  controlsDisabled,
  handleBringSourceData,
  setInitialSourceData,
  handleLeaveEditor,
}) => {
  const [currentStep, setCurrentStep] = useState<number>(0)
  const [currentStepIsLoading, setCurrentStepIsLoading] = useState<boolean>(false)

  const proceedButtonTitle = steps[currentStep].proceedButtonTitle ?? "Next"

  const handleCompleteStep = () => {
    setInitialSourceData(handleBringSourceData())
  }

  const handleGoToNextStep: AsyncUnknownFunction = async () => {
    handleCompleteStep()
    setCurrentStepIsLoading(true)
    try {
      await steps[currentStep].proceedAction?.()
      setCurrentStep(step => step + 1)
    } catch (error) {
      actionNotification.error(`${error}`)
    } finally {
      setCurrentStepIsLoading(false)
    }
  }

  const handleStepBack: AsyncUnknownFunction = async () => {
    handleCompleteStep()
    setCurrentStep(step => step - 1)
  }

  return (
    <>
      <div className={cn("flex flex-col items-stretch flex-grow-0 flex-shrink h-full min-h-0")}>
        <div className="flex-shrink-0 flex-grow-0 mb-4">
          <Steps current={currentStep}>
            {steps.map(({ key, title, description }, idx) => (
              <Steps.Step
                key={key}
                title={title}
                description={description}
                icon={idx === currentStep && currentStepIsLoading ? <LoadingOutlined spin /> : undefined}
              />
            ))}
          </Steps>
        </div>

        <div className={cn("flex-grow flex-shrink min-h-0 overflow-y-auto pr-4")}>
          <fieldset disabled={currentStepIsLoading}>{steps[currentStep]?.render}</fieldset>
        </div>

        <div className="flex items-center flex-shrink flex-grow-0 border-t py-2">
          <SourceEditorViewControls
            mainButton={{
              title: proceedButtonTitle,
              loading: currentStepIsLoading,
              handleClick: handleGoToNextStep,
            }}
            secondaryButton={{
              title: "Back",
              hide: currentStep === 0,
              handleClick: handleStepBack,
            }}
            dangerButton={{
              title: "Cancel",
              handleClick: handleLeaveEditor,
            }}
            controlsDisabled={controlsDisabled}
          />
        </div>
      </div>
    </>
  )
}

fileMap = {
  'formImage': {
    accept: '.jpg,.png',
    contentType: ['image/png', 'image/jpg'],
    limitSize: 2,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    existValueRender: (value: any, fileInfo: any, fileType: string) => (
      <Image
        preview={false}
        className={styles.image}
        src={value}
        fallback={defaultImage}
      />
    ),
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    noValueRender: (loading: boolean, fileType: string) => (
      <div className={styles.formImageButton}>
        {loading ? <LoadingOutlined/> : <PlusCircleFilled/>}
        <div className={styles.text}>上传图片</div>
      </div>
    ),
  },
  '海报': {
    accept: '.jpg,.png',
    contentType: ['image/png', 'image/jpg'],
    limitSize: 2,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    existValueRender: (value: any, fileInfo: any, fileType: string) => (
      <Image
        preview={false}
        className={styles.image}
        src={value}
        fallback={defaultImage}
      />
    ),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType)
  },
  '视频': {
    accept: '.mp4',
    contentType: ['video/mp4'],
    limitSize: 10,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    existValueRender: (value: any, fileInfo: any, fileType: string) => (
      <video src={value} style={{width: 260}} controls={true}></video>
    ),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType),
  },
  'PDF': {
    accept: '.pdf',
    contentType: ['application/pdf'],
    limitSize: 20,
    image: pdfImage,
    existValueRender: (value: any, fileInfo: any, fileType: string) => commonExistValueRender(value, fileInfo, fileType),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType),
  },
  'PPT': {
    accept: '.pptx,.ppt',
    contentType: ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
    limitSize: 20,
    image: pptImage,
    existValueRender: (value: any, fileInfo: any, fileType: string) => commonExistValueRender(value, fileInfo, fileType),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType),
  },
  '表格': {
    accept: '.xls,.xlsx',
    contentType: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
    limitSize: 20,
    image: excelImage,
    existValueRender: (value: any, fileInfo: any, fileType: string) => commonExistValueRender(value, fileInfo, fileType),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType),
  },
  '文档': {
    accept: '.doc,.docx',
    contentType: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
    limitSize: 20,
    image: wordImage,
    existValueRender: (value: any, fileInfo: any, fileType: string) => commonExistValueRender(value, fileInfo, fileType),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType),
  }
}

Preloader = () => (
    <div className="w-full h-screen z-9999 flex flex-col justify-center items-center animate-fade">
        <img src={logo} alt="Foodie Logo" className="w-48" />
        <p className="text-sm mt-4 text-gray-600">Nothing brings people together like good food.</p>
        <LoadingOutlined className="text-xl mt-4" />
    </div>
)

fileMap = {
  'formImage': {
    accept: '.jpg,.png',
    contentType: [ 'image/png', 'image/jpg'],
    limitSize: 2,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    existValueRender: (value: any, fileInfo: any, fileType: string) => (
      <Image
        preview={false}
        className={styles.image}
        src={value}
        fallback={defaultImage}
      />
    ),
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    noValueRender: (loading: boolean, fileType: string) => (
      <div className={styles.formImageButton}>
        {loading ? <LoadingOutlined/> : <PlusCircleFilled/>}
        <div className={styles.text}>上传图片</div>
      </div>
    ),
  },
  '视频': {
    accept: '.mp4',
    contentType: ['video/mp4'],
    limitSize: 10,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    existValueRender: (value: any, fileInfo: any, fileType: string) => (
          <video src={value} style={{width: 260}} controls={true}></video>
    ),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType),
  },
  'PDF': {
    accept: '.pdf',
    contentType: ['application/pdf'],
    limitSize: 20,
    image: pdfImage,
    existValueRender: (value: any, fileInfo: any, fileType: string) => commonExistValueRender(value, fileInfo, fileType),
    noValueRender: (loading: boolean, fileType: string) => commonNoValueRender(loading, fileType),
  },

}

CommentList: React.FC<IProps> = ({ comments, updateCommentCallback }) => {
    const didMount = useDidMount();
    const dispatch = useDispatch();
    const [replies, setReplies] = useState<IComment[]>(comments);
    const { isOpen, closeModal, openModal } = useModal();

    useEffect(() => {
        didMount && setReplies(comments);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [comments]);

    const deleteSuccessCallback = (comment: IComment) => {
        if (didMount) {
            (updateCommentCallback) && updateCommentCallback(comment); // For updating the base/parent comment
            dispatch(setTargetComment(null));
            setReplies(oldComments => oldComments.filter((cmt) => cmt.id !== comment.id));
        }
    }

    return (
        <TransitionGroup component={null}>
            {replies.map(comment => (
                <CSSTransition
                    timeout={500}
                    classNames="fade"
                    key={comment.id}
                >
                    <CommentItem openDeleteModal={openModal} comment={comment} />
                </CSSTransition>
            ))}
            {/* ---- DELETE MODAL ---- */}
            <Suspense fallback={<LoadingOutlined className="text-gray-800 dark:text-white" />}>
                {isOpen && (
                    <DeleteCommentModal
                        isOpen={isOpen}
                        closeModal={closeModal}
                        deleteSuccessCallback={deleteSuccessCallback}
                    />
                )}
            </Suspense>
        </TransitionGroup>
    );
}

RoleList = memo(() => {
  const dispatch = useDispatch();
  const history = useHistory();
  const list = useSelector(selectRoles);
  const listLoading = useSelector(selectRoleListLoading);
  const orgId = useSelector(selectOrgId);
  const matchRoleDetail = useRouteMatch<{ roleId: string }>(
    '/organizations/:orgId/roles/:roleId',
  );
  const roleId = matchRoleDetail?.params.roleId;
  const t = useI18NPrefix('member.sidebar');

  const { filteredData, debouncedSearch } = useDebouncedSearch(
    list,
    (keywords, d) => d.name.toLowerCase().includes(keywords.toLowerCase()),
  );

  useEffect(() => {
    dispatch(getRoles(orgId));
  }, [dispatch, orgId]);

  const toAdd = useCallback(() => {
    history.push(`/organizations/${orgId}/roles/add`);
  }, [history, orgId]);

  const toDetail = useCallback(
    id => () => {
      history.push(`/organizations/${orgId}/roles/${id}`);
    },
    [history, orgId],
  );

  const titleProps = useMemo(
    () => ({
      key: 'list',
      subTitle: t('roleTitle'),
      search: true,
      add: {
        items: [{ key: 'add', text: t('addRole') }],
        icon: <PlusOutlined />,
        callback: toAdd,
      },
      onSearch: debouncedSearch,
    }),
    [toAdd, debouncedSearch, t],
  );

  return (
    <Wrapper>
      <ListTitle {...titleProps} />
      <ListWrapper>
        <List
          dataSource={filteredData}
          loading={listLoading && { indicator: <LoadingOutlined /> }}
          renderItem={({ id, name, description }) => (
            <ListItem selected={roleId === id} onClick={toDetail(id)}>
              <List.Item.Meta title={name} description={description || '-'} />
            </ListItem>
          )}
        />
      </ListWrapper>
    </Wrapper>
  );
})

CodeRun: React.FC<ICodeRunProps> = (props) => {
  const { flowChart } = props;
  const [isRunning, setIsRunning] = useState(false);
  const [input, setInput] = useState(defaultInput);
  const [output, setOutput] = useState({});

  useEffect(() => {
    // NOTE: listen the event that iMove online exec ends
    const handler = (data: any) => {
      setIsRunning(false);
      // console.dir(data)

      if (isJson(data.detail) == true) {
        setOutput(data.detail || {});
        // console.dir( data.detail)
      }
    };
    window.addEventListener('iMoveOnlineExecEnds', handler);
    return () => {
      window.removeEventListener('iMoveOnlineExecEnds', handler);
    };
  }, []);

  const onClickRun = useCallback(() => {
    setIsRunning(true);
    const selectedCelssJson = toSelectedCellsJSON(flowChart);
    const compiledCode = compileForOnline(selectedCelssJson, input);
    executeScript(compiledCode);
  }, [flowChart, input]);

  const onChangeInput = useCallback((val: any) => {
    setInput(val);
  }, []);

  return (
    <div className={styles.container}>
      <SplitPane split={'horizontal'}>
        <Pane initialSize={'380px'} minSize={'43px'}>
          <SplitPane split={'vertical'}>
            <Pane className={styles.pane} minSize={'360px'} maxSize={'660px'}>
              <div className={styles.runWrapper}>
                {isRunning ? (
                  <Button size={'large'} type={'link'}>
                    <LoadingOutlined /> 运行中...
                  </Button>
                ) : (
                  <Button size={'large'} type={'link'} onClick={onClickRun}>
                    <PlayCircleFilled /> 运行代码
                  </Button>
                )}
              </div>
              <Card title={'输入'}>
                <InputPanel data={input} onChange={onChangeInput} />
              </Card>
            </Pane>
            <Pane className={styles.pane}>
              <Card title={'输出'}>
                <JsonView
                  name={null}
                  collapsed={false}
                  enableClipboard={false}
                  displayDataTypes={false}
                  displayObjectSize={false}
                  src={output}
                />
              </Card>
            </Pane>
          </SplitPane>
        </Pane>
        <Pane className={styles.pane} minSize={'40px'}>
          <Console />
        </Pane>
      </SplitPane>
    </div>
  );
}

antIcon = <LoadingOutlined className={s.loading} spin />

CenteredLoader = () => (
  <Centered>
    <LoadingOutlined className={styles.icon} spin={true} />
  </Centered>
)

ScheduleList: FC<{
  orgId: string;
  scheduleId?: string;
  list?: Schedule[];
}> = memo(({ orgId, scheduleId, list }) => {
  const dispatch = useDispatch();
  const editingSchedule = useSelector(selectEditingSchedule);
  const loading = useSelector(selectScheduleListLoading);
  const { toDetails } = useToScheduleDetails();

  const onUpdateScheduleList = useCallback(() => {
    dispatch(getSchedules(orgId as string));
  }, [dispatch, orgId]);

  useEffect(() => {
    onUpdateScheduleList();
  }, [onUpdateScheduleList]);

  const onClockListItem = useCallback(
    id => () => {
      toDetails(orgId, id);
    },
    [toDetails, orgId],
  );

  return (
    <List
      dataSource={list}
      loading={loading && { indicator: <LoadingOutlined /> }}
      renderItem={({ id, name, type, active }) => (
        <ListItem
          key={name}
          actions={[
            <Operations
              active={active}
              scheduleId={id}
              onUpdateScheduleList={onUpdateScheduleList}
              editingId={editingSchedule?.id}
            />,
          ]}
          className={classnames({
            schedule: true,
            selected: id === scheduleId,
          })}
          onClick={onClockListItem(id)}
        >
          <List.Item.Meta
            title={name}
            description={JOB_TYPE_TEXT[type as JobTypes]}
          />
        </ListItem>
      )}
    />
  );
})

CenteredLoader = () => (
  <Centered>
    <LoadingOutlined className={styles.icon} spin={true} />
  </Centered>
)

function PreflightItem({ name, status, caption, failedState }: PreflightItemInterface): JSX.Element {
    /*
    status === undefined -> Item still loading (no positive or negative response yet)
    status === false -> Item not ready (fail to validate)
    status === true -> Item ready (validated)
    */
    let textColor: string | undefined
    const { preflightLoading } = useValues(preflightLogic)

    if (status) {
        textColor = green.primary
    } else if (status === false) {
        if (failedState === 'warning') {
            textColor = volcano.primary
        } else if (failedState === 'not-required') {
            textColor = grey.primary
        } else {
            textColor = red.primary
        }
    } else {
        textColor = grey.primary
    }

    const icon = (): JSX.Element => {
        if (preflightLoading) {
            return <LoadingOutlined style={{ fontSize: 20, color: textColor }} />
        }
        if (status) {
            return <CheckSquareFilled style={{ fontSize: 20, color: textColor }} />
        } else {
            if (failedState === 'warning') {
                return <WarningFilled style={{ fontSize: 20, color: textColor }} />
            } else {
                return <CloseSquareFilled style={{ fontSize: 20, color: textColor }} />
            }
        }
    }

    return (
        <Col span={12} style={{ textAlign: 'left', marginBottom: 16, display: 'flex', alignItems: 'center' }}>
            {icon()}
            <span style={{ color: textColor, paddingLeft: 8 }}>
                {name}{' '}
                {caption && status === false && (
                    <div data-attr="caption" style={{ fontSize: 12 }}>
                        {caption}
                    </div>
                )}
            </span>
        </Col>
    )
}

function CloseIcon({ touched, stage, error }: CloseIconProps) {
  const [hovering, setHovering] = useState(false);

  const onEnter = useCallback(() => {
    setHovering(true);
  }, []);

  const onLeave = useCallback(() => {
    setHovering(false);
  }, []);

  let icon;

  switch (stage) {
    case ViewViewModelStages.Loading:
    case ViewViewModelStages.Running:
    case ViewViewModelStages.Saving:
      icon = <LoadingOutlined />;
      break;
    default:
      if (!hovering) {
        if (error) {
          icon = <InfoCircleOutlined css={errorColor} />;
        } else if (touched) {
          icon = <Editing />;
        } else {
          icon = <CloseOutlined />;
        }
      } else {
        icon = <CloseOutlined />;
      }

      break;
  }

  return (
    <CloseIconWrapper onMouseEnter={onEnter} onMouseLeave={onLeave}>
      {icon}
    </CloseIconWrapper>
  );
}

RuleFormItem = ({ inputProps, input, extra, popoverProps }: RuleFormItemProps) => {
  const [visible, setVisible] = useState<boolean | undefined>(false)
  const [errorStringList, setErrorList] = useState<string[]>([])

  useEffect(() => {
    if (inputProps.validateStatus !== 'validating') {
      setErrorList(inputProps.errors)
    }
  }, [inputProps.errors, inputProps.validateStatus])

  return (
    <Popover
      key="popover"
      trigger="focus"
      placement="topRight"
      visible={errorStringList.length < 1 ? false : visible}
      onVisibleChange={value => {
        if (value !== visible) {
          setVisible(value)
        }
      }}
      content={
        <div className="ay-form-item-with-help">
          {inputProps.validateStatus === 'validating' ? <LoadingOutlined /> : null}
          {errorStringList.map(text => (
            <div key={text}>
              <Text type="danger">
                <Space>
                  <InfoCircleFilled />
                  {text}
                </Space>
              </Text>
            </div>
          ))}
        </div>
      }
      {...popoverProps}
    >
      <div>
        {input}
        {extra}
      </div>
    </Popover>
  )
}

export default function EditorOperate({ handleExec, setLayout, layout }: IProp): ReactElement {
  const [exec, setExec] = useState<'RUN' | 'STOP'>('RUN')

  const childRef = useRef<ChildProcess>()

  const wrapExec = async () => {
    if (childRef.current) {
      childRef.current.kill()
      // @ts-ignore
      childRef.current = null
    } else {
      const child = await handleExec()
      // @ts-ignore
      childRef.current = child
      setExec('STOP')
      child?.on('close', code => {
        setExec('RUN')
      })
    }
  }

  return (
    <div className={styles.wrap}>
      <div className={styles.title}>
        <Button disabled size='small' icon={<FileTextOutlined />}>
          Electron v{process.versions.electron}
        </Button>
        <Button
          size='small'
          onClick={wrapExec}
          icon={exec === 'RUN' ? <CaretRightOutlined /> : <LoadingOutlined />}>
          {exec}
        </Button>
      </div>
      <div className='editors'>
        <Dropdown overlay={<WrapMenu layout={layout} setLayout={setLayout} />}>
          <Button size='small' icon={<FileTextOutlined />}>
            Editors
          </Button>
        </Dropdown>
      </div>
    </div>
  )
}

export function InsightTimeoutState({ isLoading }: { isLoading: boolean }): JSX.Element {
    const { preflight } = useValues(preflightLogic)
    return (
        <div className="insight-empty-state warning">
            <div className="empty-state-inner">
                <div className="illustration-main">{isLoading ? <LoadingOutlined spin /> : <IllustrationDanger />}</div>
                <h2>{isLoading ? 'Looks like things are a little slow…' : 'Your query took too long to complete'}</h2>
                {isLoading ? (
                    <>
                        Your query is taking a long time to complete. <b>We're still working on it.</b> However, here
                        are some things you can try to speed it up:
                    </>
                ) : (
                    <>
                        Here are some things you can try to speed up your query and <b>try again</b>:
                    </>
                )}
                <ol>
                    <li>Reduce the date range of your query.</li>
                    <li>Remove some filters.</li>
                    {!preflight?.cloud && <li>Increase the size of your database server.</li>}
                    {!preflight?.cloud && !preflight?.is_clickhouse_enabled && (
                        <li>
                            <a
                                data-attr="insight-timeout-upgrade-to-clickhouse"
                                href="https://posthog.com/docs/self-host#deployment-options?utm_medium=in-product&utm_campaign=insight-timeout-empty-state"
                                rel="noopener"
                                target="_blank"
                            >
                                Switch to Clickhouse backend
                            </a>{' '}
                            (engineered for scale, and you'll get more features)
                        </li>
                    )}
                    <li>
                        <a
                            data-attr="insight-timeout-raise-issue"
                            href="https://github.com/PostHog/posthog/issues/new?labels=performance&template=performance_issue_report.md"
                            target="_blank"
                            rel="noreferrer noopener"
                        >
                            Raise an issue
                        </a>{' '}
                        in our GitHub repository.
                    </li>
                    <li>
                        Get in touch with us{' '}
                        <a
                            data-attr="insight-timeout-slack"
                            href="https://posthog.com/slack"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            on Slack
                        </a>
                        .
                    </li>
                    <li>
                        Email us at{' '}
                        <a data-attr="insight-timeout-email" href="mailto:[email protected]">
                            [email protected]
                        </a>
                        .
                    </li>
                </ol>
            </div>
        </div>
    )
}

export default function TaskNameCell({ task, programId }) {
  const [showEdit, setShowEdit] = useState(false)
  const taskDetailsLink = `/tasks/${task.projectId}/${task.taskId}?programId=${programId}`
  const editTaskNameMutation = useEditTaskMutation({
    taskId: task.taskId,
    projectId: task.projectId,
    programId,
  })
  const [nameEditForm] = Form.useForm()
  const submitForm = ({ name }) => {
    editTaskNameMutation.mutate({ ...task, name })
  }
  return (
    <td
      className="ant-table-cell"
      onFocus={() => setShowEdit(true)}
      onBlur={() => setShowEdit(false)}
      onMouseOver={() => setShowEdit(true)}
      onMouseOut={() => setShowEdit(false)}
    >
      <div style={{ display: showEdit ? 'block' : 'none' }}>
        <EditTask task={task} programId={programId} />
      </div>
      <Form
        name={`edit_name_${task.taskId}`}
        initialValues={{ name: task.name }}
        form={nameEditForm}
        onFinish={submitForm}
      >
        <EditTaskButton
          name="name"
          required={false}
          rules={[
            {
              required: true,
              message: 'Task name can not be empty',
            },
          ]}
        >
          <Input
            disabled={editTaskNameMutation.isLoading}
            suffix={
              editTaskNameMutation.isLoading ? (
                <LoadingOutlined
                  style={{ color: 'rgba(0,0,0,.45)' }}
                />
              ) : null
            }
          />
        </EditTaskButton>
      </Form>

      <Link href={taskDetailsLink}>
        <TaskDetailsButton
          cssdisplay={showEdit ? 'inherit' : 'none'}
          icon={<ArrowsAltOutlined />}
        >
          Task Details
        </TaskDetailsButton>
      </Link>
    </td>
  )
}

export function PluginLogs({ pluginConfigId }: PluginLogsProps): JSX.Element {
    const logic = pluginLogsLogic({ pluginConfigId })

    const { pluginLogs, pluginLogsLoading, pluginLogsBackground, isThereMoreToLoad, pluginLogsTypes } = useValues(logic)
    const { revealBackground, loadPluginLogsMore, setPluginLogsTypes, setSearchTerm } = useActions(logic)

    return (
        <Space direction="vertical" style={{ flexGrow: 1 }} className="ph-no-capture plugin-logs">
            <Row>
                <Search
                    loading={pluginLogsLoading}
                    onSearch={setSearchTerm}
                    placeholder="Search for messages containing…"
                    allowClear
                />
            </Row>
            <Row>
                <Space>
                    <span>Show logs of type:&nbsp;</span>
                    <Checkbox.Group
                        options={Object.values(PluginLogEntryType)}
                        value={pluginLogsTypes}
                        onChange={setPluginLogsTypes}
                        style={{ marginLeft: '8px' }}
                    />
                </Space>
            </Row>
            <Row>
                <Button
                    onClick={revealBackground}
                    loading={pluginLogsLoading}
                    style={{ flexGrow: 1 }}
                    disabled={!pluginLogsBackground.length}
                    icon={<LoadingOutlined />}
                >
                    {pluginLogsBackground.length
                        ? `Load ${pluralize(pluginLogsBackground.length, 'newer entry', 'newer entries')}`
                        : 'No new entries'}
                </Button>
            </Row>
            <ResizableTable
                dataSource={pluginLogs}
                columns={columns}
                loading={pluginLogsLoading}
                size="small"
                className="ph-no-capture"
                rowKey="id"
                style={{ flexGrow: 1 }}
                pagination={{ pageSize: 200, hideOnSinglePage: true }}
            />
            {!!pluginLogs.length && (
                <Row>
                    <Button
                        onClick={loadPluginLogsMore}
                        loading={pluginLogsLoading}
                        style={{ flexGrow: 1 }}
                        disabled={!isThereMoreToLoad}
                    >
                        {isThereMoreToLoad ? `Load up to ${LOGS_PORTION_LIMIT} older entries` : 'No older entries'}
                    </Button>
                </Row>
            )}
        </Space>
    )
}

NotFoundPage = lazyLoad(
  () => import('./index'),
  module => module.NotFoundPage,
  {
    fallback: <LoadingOutlined />,
  },
)

export default function TaskStatus({ task, programId }) {
  const taskMutation = useEditTaskMutation({
    taskId: task.taskId,
    programId,
    projectId: task.projectId,
  })
  const menu = (
    <Menu>
      {Object.values(TaskStatuses).map((status) => (
        <Menu.Item
          key={status}
          style={{
            backgroundColor:
              status !== task.status ? 'transparent' : '#eee',
          }}
        >
          <Button
            type="text"
            onClick={() => {
              if (status !== task.status)
                taskMutation.mutate({ ...task, status })
            }}
          >
            <Tag color={statusMeta[status].bgColor}>
              {statusMeta[status].label}
            </Tag>
          </Button>
        </Menu.Item>
      ))}
    </Menu>
  )

  return (
    <Dropdown overlay={menu}>
      <Tag
        style={{ cursor: 'pointer' }}
        color={statusMeta[task.status].bgColor}
      >
        {taskMutation.isLoading ? (
          <LoadingOutlined />
        ) : (
          statusMeta[task.status].label
        )}
      </Tag>
    </Dropdown>
  )
}