Dot animation

To animate the appearance and hiding of an element, it is better to pass a hidden value rather than delete the element from the DOM.

import React from 'react';
import NotificationM from '@semcore/ui/icon/Notification/m';
import Button from '@semcore/ui/button';
import Dot from '@semcore/ui/dot';
import { Hint } from '@semcore/ui/tooltip';

const Demo = () => {
  const [dotVisible, setDotVisible] = React.useState(true);

  React.useEffect(() => {
    if (dotVisible) return;
    const timeoutId = setTimeout(() => setDotVisible(true), 3000);
    return () => clearTimeout(timeoutId);
  }, [dotVisible]);
  const handleClick = React.useCallback(() => setDotVisible(false), []);

  return (
    <Hint tag={Button} onClick={handleClick} title='Notifications'>
      <Button.Addon>
        <NotificationM />
        <Dot up hidden={!dotVisible} size='l' />
      </Button.Addon>
    </Hint>
  );
};

export default Demo;

Dot with counter

Refer to the Counter in dot example.