Как установить загрузочный спиннер после закрытия модального? - PullRequest
Новая
       32

Как установить загрузочный спиннер после закрытия модального?

0 голосов
/ 10 июня 2019

Вот процесс того, что происходит: при первом доступе к моему экрану появляется LoadingSpinner, указывающий, что запрашиваемые отправленные данные извлекаются.Я выбираю элементы строки в DataGrid, который появляется после загрузки всех данных.После выбора «Удалить» появляется DeleteModal для подтверждения, и выбранные элементы строки удаляются из dataGrid.В настоящее время после закрытия модального окна появляется сообщение до того, как снова появится DataGrid.

Вот что я хочу сделать, когда DeleteModal больше не виден: я хочу, чтобы начальный LoadingSpinner отображался снова, пока оставшиесяСтроки DataGrid завершили действие диспетчеризации для извлечения данных.

Должен ли я получить доступ к Spinner при загрузке в моем DeleteModalContainer или в Actions.js, где я настроил функцию onDelete?

В deleteModal я попытался добавить право "isLoading"после возврата ... return isLoading ? ( затем добавление isLoading в deleteModalContainer. 

Members.js
{isLoading ? (
          <LoadingSpinner className="manage-view__tab-view-loader" />
        ) : !members || members.length < 1 ? (
          <NoResults>
            You don&apos;t have any members.<br /> Please use import or manually
            add members(s).
          </NoResults>
        ) : (
          <MembersGrid members={members} />
        )}

MembersContainer.js -
const mapStateToProps = (state, ownProps) => ({
  members: getMembersList(state),
  isLoading: getMembersIsLoading(state, ownProps)
});

DeleteModal.js -
<Button onClick={() => onDelete(users)}>Delete</Button>

DeleteModalContainer.js - 
const mapStateToProps = state => ({
  isOpen: getDeleteMemberModalOpen(state)
});

const mapDispatchToProps = (dispatch, { match: { params } }) => ({
  onCancel: () => dispatch(setDeleteMemberModalOpen(false)),
  onDelete: users => {
    // Post the member deletion
    dispatch(deleteMembers(params.boardId, users));
  }
});

Actions.js - 
REQUEST,
          {
            type: SUCCESS,
            payload: (action, state, res) => {
              dispatch(setDeleteMemberModalOpen(false));
              dispatch(fetchMembers(boardId));
              return Object.values(res);
            }
          }

Ожидаемый результат: 1. Пользователь выбирает «Удалить» 2. Удаляет модальное закрытие 3. На сетке элементов отображается загрузка счетчикаперед отображением остальных участников.

...