SLVUU-123: Fix Toast Animation

[pling-scottlogic]

Description

Fixes the entry animation for toast notifications.

Change List

• Add nominal timeout around the function that puts the notification on screen
• Refactor: remove unnecessary CSS class

Testing

• Tested manually on both showcase and sample app
• Manual testing performed in Firefox, Edge and Chrome

Test Evidence

Before

After

Implementation Notes

The setRight function changes a CSS property, resulting in the notification moving into the screen from the right. Despite being defined with zero time, the timeout pushes the setRight call from the stack to the task queue. This is enough to create a distinction between the offscreen and onscreen positions, so that the transition effect can be seen.

[cfisher-scottlogic]

Part of me wonders whether there's a more 'React-y' way to do this, with hooks like useMemo or useCallback. Or maybe even an async/await. These solutions would make it feel less 'arbitrary', like 'hey wait for this specific thing I'm dependent on' rather than just 'wait'.

But this is entirely functional and clean. Well done for figuring it out! 🙂

[cfisher-scottlogic]

Part of me wonders whether there's a more 'React-y' way to do this, with hooks like useMemo or useCallback. Or maybe even an async/await. These solutions would make it feel less 'arbitrary', like 'hey wait for this specific thing I'm dependent on' rather than just 'wait'.

But this is entirely functional and clean. Well done for figuring it out! 🙂

E.g. A useEffect approach. I dislike having one useEffect depend on another useEffect in this way though. It feels like there should be a cleaner solution.

  const [toastHidden, setToastHidden] = useState(false);
  const [right, setRight] = useState<number>();

  useEffect(() => {
    setRight(-toastWidth - toastContainerRightPadding);
    setToastHidden(true);
  }, []);

  useEffect(() => {
    if (toastHidden) {
      setRight(toastContainerRightPadding);
    }

    if (animated) {
      setTimeout(
        () => setRight(-toastWidth - toastContainerRightPadding),
        toastDisplayDuration + horizontalTransitionDuration
      );
    }
  }, [toastHidden, animated]);

[pling-scottlogic]

External PR