feat(tsak-description): remove preview images from selected folders u…

…se icon insted

cause it takes time to preview all the image if images are in large number or size

src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/ImageCard/index.tsx

@@ -1,14 +1,8 @@
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useState } from 'react';
-
 import {
   setSelectedImage,
   unCheckImages,
 } from '@Store/actions/droneOperatorTask';
 import { useTypedDispatch } from '@Store/hooks';
-import Skeleton from '@Components/RadixComponents/Skeleton';
 
 interface IImageCardProps {
   image: string;
@@ -23,32 +17,33 @@ const ImageCard = ({
   deselectImages,
 }: IImageCardProps) => {
   const dispatch = useTypedDispatch();
-  const [loading, setLoading] = useState(true);
 
-  const handleLoad = () => {
-    setLoading(false);
-  };
   return (
     <>
-      {loading && (
-        <Skeleton className="naxatw-h-[8.75rem] naxatw-w-[8.75rem]" />
-      )}
       <div
-        className={`naxatw-flex naxatw-w-[8.75rem] naxatw-flex-col naxatw-gap-1 ${loading ? 'naxatw-hidden' : 'naxatw-block'}`}
+        className="naxatw-flex naxatw-h-24 naxatw-w-[6.75rem] naxatw-flex-col naxatw-gap-1 naxatw-rounded-lg naxatw-bg-gray-100 naxatw-px-1 hover:naxatw-bg-gray-300"
+        role="presentation"
+        onClick={() => dispatch(setSelectedImage(image))}
       >
-        <div className="naxatw-w-full naxatw-overflow-hidden naxatw-rounded-[0.25rem]">
-          <img
-            src={image}
+        <div className="naxatw-flex naxatw-h-16 naxatw-w-full naxatw-cursor-pointer naxatw-items-center naxatw-justify-center">
+          {/* <img
+            src={image}1
             onLoad={handleLoad}
             alt=""
             className="naxatw-h-[8.75rem] naxatw-w-full naxatw-cursor-pointer naxatw-rounded-[0.25rem] naxatw-transition hover:naxatw-scale-150"
             onClick={() => dispatch(setSelectedImage(image))}
-          />
+          /> */}
+          <i className="material-icons naxatw-text-[65px] naxatw-text-gray-400">
+            image
+          </i>
         </div>
         <div
-          role="button"
+          role="presentation"
           className="naxatw-flex naxatw-w-full naxatw-cursor-pointer naxatw-items-center naxatw-gap-2 naxatw-overflow-hidden"
-          onClick={() => dispatch(unCheckImages(deselectImages))}
+          onClick={e => {
+            e.stopPropagation();
+            dispatch(unCheckImages(deselectImages));
+          }}
         >
           <input
             type="checkbox"