pablo/logipedia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

loading indicator for editor

Browse Source
This commit is contained in:
shrt 2025-03-08 20:30:47 +01:00
parent 47a79cd171
commit bccd089c7f
2 changed files with 99 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/article/editor/article-form.tsx
View File

@ -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>

16
src/styles/globals.css
View File

@ -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;
}