From bccd089c7f3ca12fcb062ed8b56bffbc140fad17 Mon Sep 17 00:00:00 2001
From: shrt <payblot@gmail.com>
Date: Sat, 8 Mar 2025 20:30:47 +0100
Subject: [PATCH] loading indicator for editor

---
 .../article/editor/article-form.tsx           | 154 ++++++++++--------
 src/styles/globals.css                        |  16 ++
 2 files changed, 99 insertions(+), 71 deletions(-)

diff --git a/src/components/article/editor/article-form.tsx b/src/components/article/editor/article-form.tsx
index ac30391..8a6d53d 100644
--- a/src/components/article/editor/article-form.tsx
+++ b/src/components/article/editor/article-form.tsx
@@ -117,85 +117,97 @@ 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="flex w-full items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Badge variant={"outline"} className="flex items-center gap-1">
-                  {!form.formState.isDirty && !loading ? (
-                    <>
-                      <CheckCircle className="size-4 text-emerald-600" />
-                      <span>Gespeichert</span>
-                    </>
-                  ) : (
-                    <>
-                      <XCircle className="size-4 text-destructive" />
-                      <span>Nicht Gespeichert</span>
-                    </>
-                  )}
-                </Badge>
-                <span
-                  className={cn(
-                    "text-xs",
-                    published ? "text-emerald-700" : "text-muted-foreground",
-                  )}
+            <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"
+                  >
+                    {!form.formState.isDirty && !loading ? (
+                      <>
+                        <CheckCircle className="size-4 text-emerald-600" />
+                        <span>Gespeichert</span>
+                      </>
+                    ) : (
+                      <>
+                        <XCircle className="size-4 text-destructive" />
+                        <span>Nicht Gespeichert</span>
+                      </>
+                    )}
+                  </Badge>
+                  <span
+                    className={cn(
+                      "text-xs",
+                      published ? "text-emerald-700" : "text-muted-foreground",
+                    )}
+                  >
+                    {published
+                      ? "Veröffentlicht"
+                      : "Draft (nicht veröffentlicht)"}
+                  </span>
+                </div>
+                <Link
+                  href={"/editoren-hilfe"}
+                  target="_blank"
+                  className="size-max scale-90 p-0 text-xs text-muted-foreground"
                 >
-                  {published
-                    ? "Veröffentlicht"
-                    : "Draft (nicht veröffentlicht)"}
-                </span>
+                  <span>? Hilfe</span>
+                </Link>
               </div>
-              <Link
-                href={"/editoren-hilfe"}
-                target="_blank"
-                className="size-max scale-90 p-0 text-xs text-muted-foreground"
-              >
-                <span>? Hilfe</span>
-              </Link>
-            </div>
-            <FormField
-              control={form.control}
-              name="published"
-              render={({ field }) => (
-                <FormItem className="rounded-md border bg-background px-4 py-2">
-                  <FormControl>
-                    <div className="flex items-center gap-2">
-                      <Label>Veröffentlicht </Label>
-                      <PublishArticleAlertDialog
-                        published={field.value}
-                        setPublished={(value) => {
-                          field.onChange(value);
+              <FormField
+                control={form.control}
+                name="published"
+                render={({ field }) => (
+                  <FormItem className="rounded-md border bg-background px-4 py-2">
+                    <FormControl>
+                      <div className="flex items-center gap-2">
+                        <Label>Veröffentlicht </Label>
+                        <PublishArticleAlertDialog
+                          published={field.value}
+                          setPublished={(value) => {
+                            field.onChange(value);
+                            form.handleSubmit(onSubmit)();
+                          }}
+                        />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="categoryId"
+                render={({ field }) => (
+                  <FormItem className="w-full">
+                    <FormControl>
+                      <CategorySelect
+                        initialValue={field.value}
+                        onSelect={(categoryId) => {
+                          field.onChange(categoryId);
                           form.handleSubmit(onSubmit)();
                         }}
                       />
-                    </div>
-                  </FormControl>
+                    </FormControl>
 
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="categoryId"
-              render={({ field }) => (
-                <FormItem className="w-full">
-                  <FormControl>
-                    <CategorySelect
-                      initialValue={field.value}
-                      onSelect={(categoryId) => {
-                        field.onChange(categoryId);
-                        form.handleSubmit(onSubmit)();
-                      }}
-                    />
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           </div>
         </div>
       </form>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b53777f..9e47cfe 100644
--- a/src/styles/globals.css
+++ b/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;
+}