Анимация применяется к заменяемому контенту при использовании троичного оператора в response-redux

Question

Я использую троичный оператор, чтобы показать загрузочный счетчик перед его заменой на фактическое содержимое.Приведенный ниже код работает правильно в Firefox и Chrome, однако анимация продолжает происходить на замененном содержимом в IE.

Это приведет к тому, что замененное содержимое будет вращаться как загрузчик:

<div className="wrapper">
    {isFetching ? <div className="loader large" /> : <div>{children}</div>}
</div>

Это устраняет проблему:

<div className="wrapper">
    {isFetching && <div className="loader large" />}
    {!isFetching && <div>{children}</div>}
</div>

Это также устраняет проблему (предотвращает самозакрытие div):

<div className="wrapper">
    {isFetching ? <div className="loader large">a</div> : <div>{children}</div>}
</div>

Загрузчик SASS:

.loader {
  animation: spin 1s linear infinite;
  border: .5rem solid $grey;
  border-radius: 50%;
  border-top: .5rem solid $loader-border-color;
  height: 2rem;
  position: absolute;
  right: 2rem;
  top: 7.2rem;
  width: 2rem;
  z-index: 10;

  &.large {
    height: 7rem;
    margin: auto;
    position: relative;
    right: 0;
    top: 0;
    width: 7rem;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}

Мой начальныймысль заключается в том, что загрузочный div изменяется, а не удаляется, и создается новый div.Я знаю, что у меня есть два решения этой проблемы, но я хотел бы знать, почему это происходит, поскольку в проекте используется множество троичных операторов, и было бы неудобно заменять их всех.