feat: Improving page loading

src/widgets/MediaArea/index.tsx

@@ -10,23 +10,25 @@ import { observer } from "mobx-react-lite";
 import { useState, DragEvent, useRef } from "react";
 import { toast } from "react-toastify";
 
+interface MediaAreaProps {
+  articleId: number;
+  mediaIds: { id: string; media_type: number; filename: string }[];
+  deleteMedia: (id: number, media_id: string) => void;
+  onFilesDrop?: (files: File[]) => void;
+  setSelectMediaDialogOpen: (open: boolean) => void;
+}
+
 export const MediaArea = observer(
   ({
     articleId,
     mediaIds,
     deleteMedia,
-    onFilesDrop, // 👈 Проп для обработки загруженных файлов
+    onFilesDrop,
     setSelectMediaDialogOpen,
-  }: {
-    articleId: number;
-    mediaIds: { id: string; media_type: number; filename: string }[];
-    deleteMedia: (id: number, media_id: string) => void;
-    onFilesDrop?: (files: File[]) => void;
-    setSelectMediaDialogOpen: (open: boolean) => void;
-  }) => {
+  }: MediaAreaProps) => {
     const [mediaModal, setMediaModal] = useState<boolean>(false);
     const [mediaId, setMediaId] = useState<string>("");
-    const [isDragging, setIsDragging] = useState(false);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
     const fileInputRef = useRef<HTMLInputElement>(null);
 
     const handleMediaModal = (mediaId: string) => {
@@ -34,23 +36,29 @@ export const MediaArea = observer(
       setMediaId(mediaId);
     };
 
+    const processFiles = (files: File[]) => {
+      if (!files.length || !onFilesDrop) {
+        return;
+      }
+
+      const { validFiles, errors } = filterValidFiles(files);
+
+      if (errors.length > 0) {
+        errors.forEach((error) => toast.error(error));
+      }
+
+      if (validFiles.length > 0) {
+        onFilesDrop(validFiles);
+      }
+    };
+
     const handleDrop = (e: DragEvent<HTMLDivElement>) => {
       e.preventDefault();
       e.stopPropagation();
       setIsDragging(false);
 
       const files = Array.from(e.dataTransfer.files);
-      if (files.length && onFilesDrop) {
-        const { validFiles, errors } = filterValidFiles(files);
-
-        if (errors.length > 0) {
-          errors.forEach((error) => toast.error(error));
-        }
-
-        if (validFiles.length > 0) {
-          onFilesDrop(validFiles);
-        }
-      }
+      processFiles(files);
     };
 
     const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
@@ -68,19 +76,11 @@ export const MediaArea = observer(
 
     const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(event.target.files || []);
-      if (files.length && onFilesDrop) {
-        const { validFiles, errors } = filterValidFiles(files);
+      processFiles(files);
 
-        if (errors.length > 0) {
-          errors.forEach((error) => toast.error(error));
-        }
-
-        if (validFiles.length > 0) {
-          onFilesDrop(validFiles);
-        }
+      if (event.target) {
+        event.target.value = "";
       }
-      // Сбрасываем значение input, чтобы можно было выбрать тот же файл снова
-      event.target.value = "";
     };
 
     return (
@@ -96,7 +96,7 @@ export const MediaArea = observer(
         <Box className="w-full flex flex-col items-center justify-center border rounded-md p-4">
           <div className="w-full flex flex-col items-center justify-center">
             <div
-              className={`w-full h-40 flex flex-col justify-center items-center text-gray-400 border-dashed border-2 rounded-md border-gray-400 p-4 cursor-pointer hover:bg-gray-50 ${
+              className={`w-full h-40 flex flex-col justify-center items-center text-gray-400 border-dashed border-2 rounded-md border-gray-400 p-4 cursor-pointer hover:bg-gray-50 transition-colors ${
                 isDragging ? "bg-blue-100 border-blue-400" : ""
               }`}
               onDrop={handleDrop}
@@ -105,9 +105,11 @@ export const MediaArea = observer(
               onClick={handleClick}
             >
               <Upload size={32} className="mb-2" />
-              Перетащите медиа файлы сюда или нажмите для выбора
+              <span className="text-center">
+                Перетащите медиа файлы сюда или нажмите для выбора
+              </span>
             </div>
-            <div>или</div>
+            <div className="my-2">или</div>
             <Button
               variant="contained"
               color="primary"
@@ -117,33 +119,38 @@ export const MediaArea = observer(
             </Button>
           </div>
 
-          <div className="w-full flex flex-start flex-wrap gap-2 mt-4 py-10">
-            {mediaIds.map((m) => (
-              <button
-                className="relative w-20 h-20"
-                key={m.id}
-                onClick={() => handleMediaModal(m.id)}
-              >
-                <MediaViewer
-                  media={{
-                    id: m.id,
-                    media_type: m.media_type,
-                    filename: m.filename,
-                  }}
-                  height="40px"
-                />
+          {mediaIds.length > 0 && (
+            <div className="w-full flex flex-start flex-wrap gap-2 mt-4 py-10">
+              {mediaIds.map((m) => (
                 <button
-                  className="absolute top-2 right-2"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    deleteMedia(articleId, m.id);
-                  }}
+                  className="relative w-20 h-20"
+                  key={m.id}
+                  onClick={() => handleMediaModal(m.id)}
+                  type="button"
                 >
-                  <X size={16} color="red" />
+                  <MediaViewer
+                    media={{
+                      id: m.id,
+                      media_type: m.media_type,
+                      filename: m.filename,
+                    }}
+                    height="40px"
+                  />
+                  <button
+                    className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md hover:shadow-lg transition-shadow"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      deleteMedia(articleId, m.id);
+                    }}
+                    type="button"
+                    aria-label="Удалить медиа"
+                  >
+                    <X size={16} color="red" />
+                  </button>
                 </button>
-              </button>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </Box>
 
         <PreviewMediaDialog