Feat: add diferent loading for file and image

src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx

@@ -27,14 +27,14 @@ export default function FileCard({
   if (imgTypes.has(fileType)) {
     return (
       <div
-        className="relative h-1/4 w-1/4"
+        className="relative ml-20 h-auto w-auto border border-border"
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
         <img
           src={`${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/images/${content}`}
           alt="generated image"
-          className="h-full  w-full rounded-lg"
+          className="h-auto  w-auto rounded-lg border border-border"
         />
         {isHovered && (
           <div className={`file-card-modal-image-div `}>

src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx

@@ -3,6 +3,8 @@ import IconComponent, {
   ForwardedIconComponent,
 } from "../../../../../components/genericIconComponent";
 import formatFileName from "./utils/format-file-name";
+import { loadingFileComponent } from "./components/loadingFileComponent/loadingFileComponent";
+import { Skeleton } from "../../../../../components/ui/skeleton";
 
 export default function FilePreview({
   error,
@@ -22,6 +24,7 @@ export default function FilePreview({
   return (
     <div className="relative inline-block">
       {loading ? (
+        isImage ? (
           <div className="flex h-20 w-20 items-center justify-center rounded-md border border-ring bg-background ">
             <svg
               aria-hidden="true"
@@ -40,6 +43,21 @@ export default function FilePreview({
               />
             </svg>
           </div>
+        ) : (
+          <div
+            className={`relative ${isImage ? "h-20 w-20" : "h-20 w-80"} cursor-wait rounded-lg border  border-ring bg-background transition duration-300 ${
+              isHovered ? "shadow-md" : ""
+            }`}
+          >
+            <div className="ml-3 flex h-full w-full items-center gap-2 text-sm">
+              <Skeleton className="h-10 w-10 rounded-lg" />
+              <div className="flex flex-col gap-1">
+                <Skeleton className="h-3 w-48" />
+                <Skeleton className="h-3 w-10" />
+              </div>
+            </div>
+          </div>
+        )
       ) : error ? (
         <div>Error...</div>
       ) : (