chore: add motion

razorpay · Jan 31, 2025 · 1344e46 · 1344e46
1 parent 40785a3
commit 1344e46
Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/packages/blade/src/components/ChatBubble/ResponseMessageBubble.tsx b/packages/blade/src/components/ChatBubble/ResponseMessageBubble.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Rotate from './Rotate';
 import BaseBox from '~components/Box/BaseBox';
 
 const ResponseMessageBubble = ({
@@ -18,9 +19,7 @@ const ResponseMessageBubble = ({
     <BaseBox maxWidth="296px" onClick={onClick}>
       <BaseBox display="flex" gap="spacing.4" justifyContent="left">
         <BaseBox>
-          {/* <Rotate> */}
-          {leading}
-          {/* </Rotate> */}
+          <Rotate>{leading}</Rotate>
         </BaseBox>
         <BaseBox display="flex" alignItems="center" maxWidth="256px">
           {isLoading ? loadingText : children}

diff --git a/packages/blade/src/components/ChatBubble/Rotate.tsx b/packages/blade/src/components/ChatBubble/Rotate.tsx
@@ -6,15 +6,14 @@ import { useTheme } from '~components/BladeProvider';
 const Rotate = ({ children }: { children: React.ReactElement }): React.ReactElement => {
   const { theme } = useTheme();
   return (
+    // eslint-disable-next-line react/jsx-no-comment-textnodes
     <LazyMotion features={domAnimation}>
+      {/* //TODO: use blade tokens for duration and repeat */}
       <m.div
         style={{
-          display: 'inline-block', // Ensures the box wraps around its children
-          backgroundColor: 'pink',
-          //   height: '24px',
-          //   width: '24px',
+          display: 'flex',
         }}
-        // animate={{ rotate: 360 }}
+        animate={{ rotate: 360 }}
         transition={{
           duration: 2,
           repeat: Infinity,