feat(ai-assist): animated loading state (#13841)

Author: bnchrch

airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistWaiting.module.scss

@@ -1,11 +1,73 @@
 @use "scss/variables";
+@use "scss/mixins";
+@use "scss/colors";
 
 .container {
   margin: 0 variables.$spacing-2xl;
 }
 
-.aiProcessingImage {
+.assistLoadingAnimation {
   width: 100%;
-  height: auto;
-  margin-bottom: variables.$spacing-md;
+  max-width: variables.$width-modal-md;
+
+  // Alternate offset of the skeletons
+  > * {
+    &:nth-child(even) {
+      margin-left: variables.$spacing-2xl;
+    }
+
+    &:nth-child(odd) {
+      margin-right: variables.$spacing-2xl;
+    }
+  }
+
+  > div {
+    .loadingSkeleton {
+      height: variables.$button-height-lg;
+      border-radius: variables.$border-radius-xs;
+
+      // Add a hover animation to the skeleton
+      transition: transform 0.3s ease-in-out;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+
+    // Offset the animation of the skeleton
+    &:nth-child(even) {
+      .loadingSkeleton {
+        animation-delay: -2s;
+      }
+    }
+
+    &:nth-child(3n) {
+      .loadingSkeleton {
+        animation-delay: -4.5s;
+      }
+    }
+  }
+}
+
+.floatingAnimation {
+  animation: float-side-to-side 8s ease-in-out infinite;
+
+  &:nth-child(even) {
+    animation-delay: -2.5s;
+  }
+
+  &:nth-child(3n) {
+    animation-delay: -5s;
+  }
+}
+
+@keyframes float-side-to-side {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(10px);
+  }
 }

airbyte-webapp/src/components/connectorBuilder/Builder/Assist/AssistWaiting.tsx

@@ -3,19 +3,35 @@ import { FormattedMessage } from "react-intl";
 
 import { Button } from "components/ui/Button";
 import { FlexContainer } from "components/ui/Flex";
+import { LoadingSkeleton } from "components/ui/LoadingSkeleton";
 import { Text } from "components/ui/Text";
 
-import aiProcessing from "./assistwaiting.gif";
 import styles from "./AssistWaiting.module.scss";
 
 interface AssistWaitingProps {
   onSkip: () => void;
 }
 
+const FloatingLoadingSkeleton = () => (
+  <div className={styles.floatingAnimation}>
+    <LoadingSkeleton variant="magic" className={styles.loadingSkeleton} />
+  </div>
+);
+
+const AssistLoadingAnimation = () => {
+  return (
+    <FlexContainer direction="column" gap="lg" className={styles.assistLoadingAnimation}>
+      <FloatingLoadingSkeleton />
+      <FloatingLoadingSkeleton />
+      <FloatingLoadingSkeleton />
+    </FlexContainer>
+  );
+};
+
 export const AssistWaiting: React.FC<AssistWaitingProps> = ({ onSkip }) => {
   return (
     <FlexContainer alignItems="center" direction="column" gap="md" className={styles.container}>
-      <img src={aiProcessing} alt="" className={styles.aiProcessingImage} />
+      <AssistLoadingAnimation />
       <Text size="xl" color="darkBlue">
         <FormattedMessage id="connectorBuilder.assist.waiting.message" />
       </Text>

airbyte-webapp/src/components/connectorBuilder/Builder/Assist/assistwaiting.gif

@@ -1,26 +1,52 @@
 @use "scss/colors";
 @use "scss/variables";
+@use "scss/mixins";
 
 .loadingSkeleton {
+  background: colors.$loading-skeleton-base;
+
+  &--buttonHeight {
+    height: variables.$button-height-xs;
+  }
+}
+
+.loadingSkeletonShimmer {
   animation-duration: 1.6s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-name: shimmer;
   animation-timing-function: linear;
-  background: colors.$loading-skeleton-base;
   background: linear-gradient(
     to right,
     colors.$loading-skeleton-stop-1 8%,
     colors.$loading-skeleton-stop-2 25%,
     colors.$loading-skeleton-stop-1 50%
   );
   background-size: 1200px 100%;
+}
 
-  &--buttonHeight {
-    height: variables.$button-height-xs;
-  }
+.loadingSkeletonMagic {
+  @include mixins.gradient-border(
+    variables.$border-thin,
+    linear-gradient(
+      var(--gradient-angle),
+      colors.$grey-100 0%,
+      colors.$grey-100 70%,
+      colors.$gradient-primary-start 70%,
+      colors.$gradient-primary-stop 100%
+    )
+  );
+
+  border: variables.$border-thin solid transparent;
+  animation-duration: 7s;
+  animation-iteration-count: infinite;
+  animation-name: rotate-gradient;
+  animation-timing-function: linear;
+  animation-delay: 0s;
 }
 
+// ANIMATIONS
+
 @keyframes shimmer {
   0% {
     background-position: -1200px 0;
@@ -30,3 +56,19 @@
     background-position: 1200px 0;
   }
 }
+
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes rotate-gradient {
+  0% {
+    --gradient-angle: 0deg;
+  }
+
+  100% {
+    --gradient-angle: 360deg;
+  }
+}

airbyte-webapp/src/components/ui/LoadingSkeleton/LoadingSkeleton.module.scss

@@ -11,12 +11,20 @@ export default {
 } as StoryObj<typeof LoadingSkeleton>;
 
 export const Default: StoryObj<typeof LoadingSkeleton> = {
-  args: {},
-  render: () => (
+  args: {
+    variant: "shimmer",
+  },
+  argTypes: {
+    variant: {
+      control: { type: "radio" },
+      options: ["shimmer", "magic"],
+    },
+  },
+  render: ({ variant }) => (
     <FlexContainer direction="column" gap="xl">
-      <LoadingSkeleton />
-      <LoadingSkeleton />
-      <LoadingSkeleton />
+      <LoadingSkeleton variant={variant} />
+      <LoadingSkeleton variant={variant} />
+      <LoadingSkeleton variant={variant} />
     </FlexContainer>
   ),
 };

airbyte-webapp/src/components/ui/LoadingSkeleton/LoadingSkeleton.stories.tsx

@@ -2,6 +2,20 @@ import classNames from "classnames";
 
 import styles from "./LoadingSkeleton.module.scss";
 
-export const LoadingSkeleton = ({ className }: { className?: string }) => {
-  return <div className={classNames(styles.loadingSkeleton, styles["loadingSkeleton--buttonHeight"], className)} />;
+export type LoadingSkeletonVariants = "shimmer" | "magic";
+
+export interface LoadingSkeletonProps {
+  className?: string;
+  variant?: LoadingSkeletonVariants;
+}
+
+export const LoadingSkeleton = ({ className, variant = "shimmer" }: LoadingSkeletonProps) => {
+  const variantStyles = {
+    [styles.loadingSkeletonShimmer]: variant === "shimmer",
+    [styles.loadingSkeletonMagic]: variant === "magic",
+  };
+
+  const classes = classNames(styles.loadingSkeleton, styles["loadingSkeleton--buttonHeight"], variantStyles, className);
+
+  return <div className={classes} />;
 };