diff --git a/package-lock.json b/package-lock.json
index cf191fe3a..dcd30383f 100644
--- a/package-lock.json
+++ b/package-lock.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",
@@ -22289,6 +22290,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.3.30",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.30.tgz",
+      "integrity": "sha512-9VmqGe9OIjfMoCcs+ZsKXlv6JaG5QagKX2F1uSbkG3Z33wgjnz60Kw+CngC1M49rDYau+Y9aL+8jGagAwrbVyw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framer-motion/node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -59609,6 +59639,21 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framer-motion": {
+      "version": "11.3.30",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.30.tgz",
+      "integrity": "sha512-9VmqGe9OIjfMoCcs+ZsKXlv6JaG5QagKX2F1uSbkG3Z33wgjnz60Kw+CngC1M49rDYau+Y9aL+8jGagAwrbVyw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+          "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+        }
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
diff --git a/package.json b/package.json
index c63643d2d..9feeeead6 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/messenger/feed/components/create-post/index.tsx b/src/components/messenger/feed/components/create-post/index.tsx
index c0302bf69..e7daed194 100644
--- a/src/components/messenger/feed/components/create-post/index.tsx
+++ b/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}>
diff --git a/src/components/messenger/feed/components/create-post/styles.module.scss b/src/components/messenger/feed/components/create-post/styles.module.scss
index 38929b9d1..b93945bc1 100644
--- a/src/components/messenger/feed/components/create-post/styles.module.scss
+++ b/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;
+}