Issue#483

[AmooHashem]

As was mentioned in issue comments, I search for a race condition and check every thing that thought might have effect on race.
I just change a setTimeout() duration to zero and it works (at least in playground) and also, it pass all the tests.

[coveralls]

Coverage remained the same at 93.596% when pulling 5783058 on AmooHashem:issue#483 into eac7f7b on fkhadra:master.

[fkhadra]

Hey @AmooHashem, thanks for your contribution.

Unfortunately, this change will prevent the collapse animation to work when you have many notifications displayed at the same time.

Screen.Recording.2020-12-20.at.8.42.49.PM.mov

[fkhadra]

@AmooHashem, one solution would be maybe to do as follow

export function collapseToast(
  node: HTMLElement,
  done: () => void,
  duration = DEFAULT.COLLAPSE_DURATION
) {
  const height = node.scrollHeight;
  const style = node.style;
  
  // rely  on transitionend instead of timeout 
  node.addEventListener('transitionend', () => done());
  
  requestAnimationFrame(() => {
    style.minHeight = 'initial';
    style.height = height + 'px';
    style.transition = `all ${duration}ms`;

    requestAnimationFrame(() => {
      style.height = '0';
      style.padding = '0';
      style.margin = '0';
      // remove setTimeout
      // setTimeout(() => done(), duration as number);
    });
  });
}

[AmooHashem]

@AmooHashem, one solution would be maybe to do as follow

export function collapseToast(
  node: HTMLElement,
  done: () => void,
  duration = DEFAULT.COLLAPSE_DURATION
) {
  const height = node.scrollHeight;
  const style = node.style;
  
  // rely  on transitionend instead of timeout 
  node.addEventListener('transitionend', () => done());
  
  requestAnimationFrame(() => {
    style.minHeight = 'initial';
    style.height = height + 'px';
    style.transition = `all ${duration}ms`;

    requestAnimationFrame(() => {
      style.height = '0';
      style.padding = '0';
      style.margin = '0';
      // remove setTimeout
      // setTimeout(() => done(), duration as number);
    });
  });
}

but in this case, it will fail some tests. I also checked it.

[fkhadra]

I'm currently working on the removal of react-transition-group #514 . I have a working solution but I have to adapt a bunch of tests right now. There is an impact on this part of the code. I'll try to push my code when it's stable

[fkhadra]

I found the root cause. I'll open a PR soon with the fix