Add animation to SkeletonField component (#2184)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Fixes OPS-4043

Author: Roman Snapko

packages/ui-components/src/components/skeleton/skeleton-field.tsx

@@ -22,7 +22,7 @@ const SkeletonField = ({
         data-testid="skeleton-field"
         className={cn(
           'w-full h-full rounded-xl',
-          'bg-gradient-to-r from-muted to-border',
+          'animate-shimmer bg-gradient-to-l from-muted via-border to-muted bg-[length:200%_100%]',
           className,
         )}
       />

packages/ui-components/src/stories/skeleton/skeleton-field.stories.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof SkeletonField> = {
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
+    chromatic: { pauseAnimationAtEnd: true },
   },
   decorators: [ThemeAwareDecorator],
 };

packages/ui-components/tailwind.base.config.cjs

@@ -162,13 +162,18 @@ module.exports = {
           from: { height: 'var(--radix-collapsible-content-height)' },
           to: { height: '0' },
         },
+        shimmer: {
+          '0%': { backgroundPosition: '200% 0' },
+          '100%': { backgroundPosition: '-200% 0' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
         slideDown: 'slideDown 0.2s ease-out',
         slideUp: 'slideUp 0.2s ease-out',
         fade: 'fade 0.2s ease-out',
+        shimmer: 'shimmer 3s infinite linear',
       },
       boxShadow: {
         editor: '3px 8px 23px 0px hsla(var(--editor-shadow-color))',