chore: change refresh icon

[samobasquiat]

Summary

Changed the refresh icon codes & icon to remove setIntervals and handling by css animations

Checklist:

• I have performed a self-review of my code
• Implemented a user interface (UI) change, referencing our Figma design to ensure pixel-perfect precision.

[samobasquiat]

We can Also use 'react-lottie' in this way:

import { RefreshProgressButton } from '@rango-dev/ui';
import React, { useEffect, useRef, useState } from 'react';
import Lottie from 'react-lottie';
import * as animationData from './refresh.json';

import { HeaderButton, ProgressIcon } from './HeaderButtons.styles';

const PROGRESS_DURATION = 60;

function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
  const isDisabled = !onClick;
  const [isRefreshed, setIsRefreshed] = useState(false);
  const [isPaused, setIsPaused] = useState(isDisabled);
  const ref = useRef<HTMLButtonElement>(null);

  const handleVisibilityChange = () => {
    setIsPaused(document.hidden || isDisabled);
  };

  useEffect(() => {
    setIsPaused(isDisabled);

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [onClick]);

  const handleRefreshClick = () => {
    onClick?.();
    setIsPaused(true);
    setIsRefreshed(true);
  };

  const handleRefreshComplete = () => {
    setIsPaused(false);
    setIsRefreshed(false);
  };

  return (
    <HeaderButton
      variant="ghost"
      ref={ref}
      size="small"
      style={{ paddingTop: 0, paddingBottom: 0 }}
      onClick={handleRefreshClick}
      disabled={isDisabled}>
      <ProgressIcon
        onTransitionEnd={handleRefreshComplete}
        isRefetched={isRefreshed}>
        <Lottie
          options={{
            animationData,
          }}
          isPaused={isPaused}
          height={24}
          width={24}
        />
      </ProgressIcon>
    </HeaderButton>
  );
}

export { RefreshButton };