loading indicator for editor

src/components/article/editor/article-form.tsx

@@ -117,13 +117,24 @@ export default ({ server_article }: { server_article: Article }) => {
           />
           <div
             className={cn(
-              "sticky top-4 h-max w-full max-w-md space-y-4 rounded-md border-t-2 bg-muted p-4",
-              loading && "border-t-blue-600",
+              "sticky top-4 h-max w-full max-w-md",
+              // loading && "border-t-blue-600",
             )}
           >
+            <div className="relative w-full space-y-4 overflow-hidden rounded-md border-t-2 bg-muted p-4">
+              <div
+                className={cn(
+                  "saving absolute left-0 right-0 top-0 h-0.5 rounded-full bg-primary",
+                  !loading && "hidden",
+                )}
+              />
+
               <div className="flex w-full items-center justify-between">
                 <div className="flex items-center gap-2">
-                <Badge variant={"outline"} className="flex items-center gap-1">
+                  <Badge
+                    variant={"outline"}
+                    className="flex items-center gap-1"
+                  >
                     {!form.formState.isDirty && !loading ? (
                       <>
                         <CheckCircle className="size-4 text-emerald-600" />
@@ -198,6 +209,7 @@ export default ({ server_article }: { server_article: Article }) => {
               />
             </div>
           </div>
+        </div>
       </form>
     </Form>
   );

src/styles/globals.css

@@ -86,3 +86,19 @@
   width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
 }
+
+@keyframes loadingBar {
+  0% {
+    transform: scaleX(0);
+  }
+  60% {
+    transform: scaleX(1); /* Slight overshoot for bounce effect */
+  }
+  100% {
+    transform: scaleX(0.2);
+  }
+}
+
+.saving {
+  animation: loadingBar 0.8s cubic-bezier(0.3, 0.8, 0.4, 1) infinite alternate;
+}