如何让加载图标与antd表格的文字和按钮居中

Question

import React from 'react';
import { Button } from 'antd';

export const getLoadingCondition = ({ isLoading, showSpinnerText, onClearFilters }: LoadingConditionProps) => ({
  delay: 500,
  spinning: isLoading,
  ...(showSpinnerText && {
    tip: (
      <div className="loading-content">
        <div className="loading-text" dangerouslySetInnerHTML={{ __html: i18n('labels.loader-text') }} />
        <Button
          type="primary"
          htmlType="submit"
          onClick={onClearFilters}
        >
          {i18n('buttons.abort-search')}
        </Button>
      </div>
    ),
  }),
});

// styles.scss
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.loading-text {
  color: $eds-black-85-spotlight-background !important;
  text-align: center;
}

---------------------------------------------------------------------------------

import React, { useState } from 'react';
import { Table } from 'antd';

const FlightPlanTable = ({}: FlightPlanTableProps) => {
 
  const loadingCondition = getLoadingCondition({
    isLoading,
    showSpinnerText,
    onClearFilters,
  });

  return (
    <>
      <Table
        sticky={true}
        className="table-with-dropdown"
        size={'small'}
        style={{ minHeight: scrollHeight}}
        loading={loadingCondition}
        columns={columns as ColumnsType<UIFlightPlanRecord>}
        scroll={{ y: scrollHeight }}
        pagination={false}
        dataSource={records}
        virtual
      />
    </>
  );
};

Answer 1

将您的 styles.scss 编辑为

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 100px; /* Height you want to center on */
}

.loading-text {
  color: $eds-black-85-spotlight-background !important;
  text-align: center;
}

.ant-spin-spinning {
  display: flex;
  align-items: center;
  justify-content: center;
}