feat(imageModal): Add fade-in

1ilsang · Jun 11, 2024 · eb2e0c7 · eb2e0c7
1 parent 098a878
commit eb2e0c7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/features/shared/components/modal/ImageModal.tsx b/src/features/shared/components/modal/ImageModal.tsx
@@ -22,7 +22,7 @@ const ImageModal: FunctionComponent<ImageModalProps> = () => {
           </div>
         )}
         <img
-          className={classNames({ hidden: loading })}
+          className={classNames({ hidden: loading, 'fade-in': !loading })}
           src={imageSrc}
           ref={imageRef}
         />

diff --git a/src/features/shared/components/modal/useImageModal.tsx b/src/features/shared/components/modal/useImageModal.tsx
@@ -18,7 +18,7 @@ export const useImageModal = () => {
     }).then(() => {
       setTimeout(() => {
         setLoading(false);
-      }, 700);
+      }, 150);
     });
   };
 

diff --git a/src/features/styles/modal/image.scss b/src/features/styles/modal/image.scss
@@ -50,7 +50,7 @@
         height: 30%;
         animation:
           skeleton-gradient 1.8s infinite ease-in-out,
-          spin 1.8s infinite ease-in-out;
+          spin 1s infinite ease-in-out;
       }
     }
 
@@ -63,5 +63,19 @@
     .hidden {
       visibility: hidden;
     }
+
+    .fade-in {
+      @keyframes fade-in {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      animation: fade-in 0.4s;
+    }
   }
 }