[RxJS] "Animation Allowed" problem

const tasks = of([....]);

/**
 *  {
 *    ...{ ...4......5......2}
 *    ...........{3...........2...5}
 *    ..................................{6....  3}
 *    ..........................................{3..4....2}
 *  }
 *
 */
const animationAllowed = tasks
  .map((task) =>
    // preappend 1
    // append -1
    // ingore task
    Observable.concat(
      of(1), //start
      task.filter(() => false),
      of(-1) //end
    )
  )
  /**
   * {
   *   ...{1................-1}
   *   ...........{1................-1}
   *   ...................................{1.......-1}
   *   ..........................................{1......-1}
   * }
   *
   */
  .mergeAll()
  // {....1....1.........-1........-1....1.....1.-1....-1}
  .scan((acc, curr) => {
    return acc + curr;
  }, 0)
  // {....1....2........1..........0.....1.....2.1......0}
  .map((num) => {
    return num === 0;
  })
  // {....F......F..........F......T..... F......F.F....T}
  .distincTUntilChanged();
// {....F........................T..... F.............T}