Add feedback form functionality2

src/components/shared/FeedbackModal.module.css

@@ -66,6 +66,18 @@
   object-fit: cover;
 }
 
+.imageLoading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
+  color: #666;
+  font-size: 12px;
+  text-align: center;
+}
+
 .removeImageButton {
   position: absolute;
   top: 4px;

src/components/shared/FeedbackModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect, memo } from 'react';
 import styles from './NotificationModal.module.css'; // Используем существующие стили
 import feedbackStyles from './FeedbackModal.module.css'; // Дополнительные стили для формы
 
@@ -13,6 +13,50 @@ interface FeedbackModalProps {
   onSubmit: (data: FeedbackData) => Promise<boolean> | boolean;
 }
 
+// Мемоизированный компонент превью изображения
+const ImagePreview = memo(({ 
+  file, 
+  index, 
+  onRemove, 
+  disabled 
+}: { 
+  file: File; 
+  index: number; 
+  onRemove: (index: number) => void; 
+  disabled: boolean;
+}) => {
+  const [url, setUrl] = useState<string | null>(null);
+  
+  useEffect(() => {
+    // Создаем URL для превью
+    const objectUrl = URL.createObjectURL(file);
+    setUrl(objectUrl);
+    
+    // Очищаем URL при размонтировании
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  
+  return (
+    <div className={feedbackStyles.imagePreview}>
+      {url ? (
+        <img src={url} alt={`Preview ${index}`} />
+      ) : (
+        <div className={feedbackStyles.imageLoading}>Загрузка...</div>
+      )}
+      <button 
+        className={feedbackStyles.removeImageButton}
+        onClick={() => onRemove(index)}
+        type="button"
+        disabled={disabled}
+      >
+        ✕
+      </button>
+    </div>
+  );
+});
+
 const FeedbackModal: React.FC<FeedbackModalProps> = ({ isVisible, onClose, onSubmit }) => {
   const [text, setText] = useState('');
   const [images, setImages] = useState<File[]>([]);
@@ -163,18 +207,14 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ isVisible, onClose, onSub
           {/* Превью загруженных изображений */}
           {images.length > 0 && (
             <div className={feedbackStyles.imagePreviewContainer}>
-              {images.map((image, index) => (
+              {images.map((file, index) => (
-                <div key={index} className={feedbackStyles.imagePreview}>
+                <ImagePreview
-                  <img src={URL.createObjectURL(image)} alt={`Preview ${index}`} />
+                  key={`${file.name}-${index}`}
-                  <button 
+                  file={file}
-                    className={feedbackStyles.removeImageButton}
+                  index={index}
-                    onClick={() => handleRemoveImage(index)}
+                  onRemove={handleRemoveImage}
-                    type="button"
+                  disabled={isLoading}
-                    disabled={isLoading}
+                />
-                  >
-                    ✕
-                  </button>
-                </div>
               ))}
             </div>
           )}