feat: loading indicator when creating a post (#2211)

* chore: install `framer-motion`

* feat: create post loading animation

package.json

@@ -38,6 +38,7 @@
     "emoji-mart": "^3.0.1",
     "es6-promise-debounce": "^1.0.1",
     "ethers": "^5.5.2",
+    "framer-motion": "^11.3.30",
     "global": "^4.4.0",
     "history": "^4.10.1",
     "if-emoji": "^0.1.0",

src/components/messenger/feed/components/create-post/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
+import { motion, AnimatePresence } from 'framer-motion';
 import { Avatar, Button } from '@zero-tech/zui/components';
 
 import { Key } from '../../../../../lib/keyboard-search';
@@ -41,8 +42,21 @@ export const CreatePost = ({ avatarUrl, isSubmitting, onSubmit }: CreatePostProp
         <Avatar imageURL={avatarUrl} size={'regular'} />
       </div>
       <div className={styles.Create}>
-        <PostInput value={value} onChange={handleOnChange} onKeyDown={handleKeyDown} />
-        <hr />
+        <div className={styles.Input}>
+          <AnimatePresence>
+            {isSubmitting && (
+              <motion.div
+                className={styles.Loading}
+                initial={{ width: 0, opacity: 1 }}
+                animate={{ width: '60%', opacity: 1 }}
+                exit={{ width: '100%', opacity: 0 }}
+                transition={{ duration: 0.4 }}
+              />
+            )}
+          </AnimatePresence>
+          <PostInput value={value} onChange={handleOnChange} onKeyDown={handleKeyDown} />
+          <hr />
+        </div>
         <div className={styles.Actions}>
           <div className={styles.Media}></div>
           <Button isDisabled={isDisabled} isLoading={isSubmitting} className={styles.Button} onPress={handleOnSubmit}>

src/components/messenger/feed/components/create-post/styles.module.scss

@@ -10,6 +10,7 @@
   flex: 1;
   flex-direction: column;
   gap: 8px;
+  position: relative;
 
   hr {
     border: none;
@@ -48,3 +49,16 @@
 .Avatar {
   pointer-events: none;
 }
+
+.Input {
+  position: relative;
+}
+
+.Loading {
+  background: var(--color-secondary-9);
+  height: 2px;
+  left: 0;
+  position: absolute;
+  top: calc(100% - 8px - 1px);
+  width: 0;
+}