message: Replace notification progress with framer motion
diff: import clsx from 'clsx';
  +import { motion, Transition } from 'framer-motion';
  import React, { useCallback, useEffect, useRef, useState } from 'react';
  -import { animated, config, useSpring } from 'react-spring';
  +import { animated } from 'react-spring';
  import './Notification.scss';
  import { Notify } from './notifications';
  @@ -18,6 +19,10 @@ export default function Notification({ notification, style, onClose }: Props) {
  const timer = useRef(0);
  const setupTimer = useCallback(() => {
  + if (timer.current) {
  + window.clearTimeout(timer.current);
  + timer.current = 0;
  + }
  if (!error && !success && notification.promise) {
  notification.promise.then(() => setSuccess(true)).catch(setError);
  } else if (notification.duration) {
  @@ -62,11 +67,20 @@ export default function Notification({ notification, style, onClose }: Props) {
  setupTimer();
  };
  - const progressBarProps = useSpring({
  - from: { width: '0%' },
  - to: { width: mouseover || Boolean(!error && !success && notification.promise) ? '0%' : '100%' },
  - config: mouseover ? config.default : { ...config.default, duration: notification.duration },
  - });
  + const progressTarget =
  + mouseover || Boolean(!error && !success && notification.promise) ? '0%' : '100%';
  +
  + const transition: Transition = mouseover
  + ? {
  + type: 'tween',
  + ease: 'easeOut',
  + duration: 0.3,
  + }
  + : {
  + type: 'tween',
  + ease: 'linear',
  + duration: notification.duration / 1000 - 0.3,
  + };
  return (
  <animated.div
  @@ -100,7 +114,12 @@ export default function Notification({ notification, style, onClose }: Props) {
  </div>
  {(success || error || !notification.promise) &&
  typeof notification.duration === 'number' && (
  - <animated.div style={progressBarProps} className="notification-timer" />
  + <motion.div
  + transition={transition}
  + initial={{ width: '0%' }}
  + animate={{ width: progressTarget }}
  + className="notification-timer"
  + />
  )}
  </div>
  </animated.div>
  