Chromatic fix animation flakiness (#2109)

* use pauseAnimationAtEnd

* use preload syntax instead of embedded fonts, i think we still weren't preloading our copy of typekit css

Author: snowystinger

.chromatic/custom-addons/chromatic/chromatic.css

@@ -2,7 +2,6 @@ import {locales, scales, themes} from '../../constants';
 import {makeDecorator} from '@storybook/addons';
 import {Provider, View} from '@adobe/react-spectrum';
 import React, {useEffect} from 'react';
-import styles from './chromatic.css';
 
 export const withChromaticProvider = makeDecorator({
   name: 'withChromaticProvider',

.chromatic/custom-addons/chromatic/index.js

@@ -1 +1,24 @@
+<link rel="preload" href="https://use.typekit.net/uma8ayv.css" as="style" />
+
+<link rel="preload" href="https://use.typekit.net/af/cb695f/000000000000000000017701/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/cb695f/000000000000000000017701/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/cb695f/000000000000000000017701/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+
+<link rel="preload" href="https://use.typekit.net/af/74ffb1/000000000000000000017702/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/74ffb1/000000000000000000017702/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/74ffb1/000000000000000000017702/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3" as="font" crossorigin="anonymous" />
+
+<link rel="preload" href="https://use.typekit.net/af/eaf09c/000000000000000000017703/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/eaf09c/000000000000000000017703/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/eaf09c/000000000000000000017703/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+
+<link rel="preload" href="https://use.typekit.net/af/40207f/0000000000000000000176ff/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/40207f/0000000000000000000176ff/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/40207f/0000000000000000000176ff/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+
+<link rel="preload" href="https://use.typekit.net/af/505d17/00000000000000003b9aee44/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/505d17/00000000000000003b9aee44/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+<link rel="preload" href="https://use.typekit.net/af/505d17/00000000000000003b9aee44/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3" as="font" crossorigin="anonymous" />
+
+
 <link rel="stylesheet" href="https://use.typekit.net/uma8ayv.css" />

.chromatic/preview-head.html

@@ -31,7 +31,7 @@ const meta: Meta<SpectrumMenuTriggerProps> = {
   parameters: {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true},
     // chromatic needs a bit more time than disableAnimations allows
-    chromatic: {delay: 2000}
+    chromatic: {pauseAnimationAtEnd: true}
   },
   decorators: [Story => <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}><Story /></div>]
 };

packages/@react-spectrum/menu/chromatic/MenuTrigger.chromatic.tsx

@@ -19,7 +19,7 @@ const meta: Meta = {
   parameters: {
     chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['medium'], disableAnimations: true},
     // chromatic needs a bit more time than disableAnimations allows
-    chromatic: {delay: 2000}
+    chromatic: {pauseAnimationAtEnd: true}
   },
   decorators: [Story => <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}><Story /></div>]
 };

packages/@react-spectrum/menu/chromatic/MenuTriggerRTL.chromatic.tsx

@@ -22,7 +22,7 @@ const meta: Meta<SpectrumTooltipTriggerProps> = {
   parameters: {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true},
     // chromatic needs a bit more time than disableAnimations allows
-    chromatic: {delay: 2000}
+    chromatic: {pauseAnimationAtEnd: true}
   }
 };