♻️(react) disable animation when Chromatic is running

We need to disable Javascript animation when Chromatic is taking
snapshots in order to avoid having changes detected each time a build
is ran.

packages/react/src/components/Toast/ToastProvider.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useContext, useMemo, useRef } from "react";
+import isChromatic from "chromatic/isChromatic";
 import { Toast, ToastProps } from ":/components/Toast/index";
 import { tokens } from ":/cunningham-tokens";
 import { Queue } from ":/utils/Queue";
@@ -100,7 +101,7 @@ export const ToastProvider = ({ children }: PropsWithChildren) => {
 
     // PLAY
     // We need to check if the animate function exists because it's not available in some testing environments ( like jest-dom )
-    if (typeof container.current.animate === "function") {
+    if (typeof container.current.animate === "function" && !isChromatic()) {
       container.current.animate(
         [
           { transform: `translateY(${invert}px)` },

packages/react/src/components/Toast/index.tsx

@@ -6,6 +6,7 @@ import React, {
   useRef,
 } from "react";
 import classNames from "classnames";
+import isChromatic from "chromatic/isChromatic";
 import { Button, ButtonProps } from ":/components/Button";
 import { iconFromType, VariantType } from ":/utils/VariantUtils";
 
@@ -105,6 +106,9 @@ export const ProgressBar = ({ duration }: { duration: number }) => {
   const content = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (isChromatic()) {
+      return;
+    }
     content.current!.animate([{ width: "0%" }, { width: "100%" }], {
       duration,
       easing: "linear",