feat: add cover image upload functionality with loading state in article creation form

src/ui/components/internal/create-article-form.tsx

@@ -54,6 +54,7 @@ function validateContentFile(file: File): string | null {
 
 export const CreateArticleForm = () => {
     const [coverImageFile, setCoverImageFile] = useState<File | null>(null);
+    const [coverImageUploading, setCoverImageUploading] = useState(false);
     const [contentFile, setContentFile] = useState<File | null>(null);
     const coverImageUrlRef = useRef<string | null>(null);
 
@@ -78,10 +79,8 @@ export const CreateArticleForm = () => {
         },
     });
 
-    const title = useWatch({
-        control: form.control,
-        name: 'title',
-    });
+    const title = useWatch({ control: form.control, name: 'title' });
+    const coverImageUrl = useWatch({ control: form.control, name: 'coverImageUrl' });
     useEffect(() => {
         if (!title) return;
         form.setValue('slug', slugify(title).toLowerCase());
@@ -93,6 +92,7 @@ export const CreateArticleForm = () => {
             coverImageUrlRef.current = null;
         }
         setCoverImageFile(null);
+        setCoverImageUploading(false);
         setContentFile(null);
     }, []);
 
@@ -128,10 +128,13 @@ export const CreateArticleForm = () => {
             setCoverImageFile(file);
             if (!file) {
                 setCoverImageFile(null);
+                setCoverImageUploading(false);
                 form.setValue('coverImageUrl', '');
                 return;
             }
+            setCoverImageUploading(true);
             const fileMetadataResult = await uploadFile(file);
+            setCoverImageUploading(false);
             if (!fileMetadataResult.ok) {
                 setCoverImageFile(null);
                 form.setValue('coverImageUrl', '');
@@ -255,6 +258,8 @@ export const CreateArticleForm = () => {
                         label='Cover image'
                         description='PNG, JPG, GIF, WebP accepted'
                         error={form.formState.errors.coverImageUrl?.message}
+                        previewUrl={coverImageUrl || undefined}
+                        isUploading={coverImageUploading}
                         icon={
                             <Image
                                 src={ImageLogo}