From ca5e29979106baf3f6efd1f8ae4704924eac9eec Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Thu, 23 Feb 2023 12:57:52 +0700
Subject: [PATCH] added memo to image and video card

---
 src/components/note/content/index.tsx             | 4 ++--
 src/components/note/content/preview/imageCard.tsx | 7 +++++--
 src/components/note/content/preview/video.tsx     | 5 +++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/note/content/index.tsx b/src/components/note/content/index.tsx
index 39249fd9..f0169a8f 100644
--- a/src/components/note/content/index.tsx
+++ b/src/components/note/content/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ImageCard from '@components/note/content/preview/imageCard';
-import Video from '@components/note/content/preview/video';
+import { ImageCard } from '@components/note/content/preview/imageCard';
+import { Video } from '@components/note/content/preview/video';
 
 import dynamic from 'next/dynamic';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
diff --git a/src/components/note/content/preview/imageCard.tsx b/src/components/note/content/preview/imageCard.tsx
index 9c137948..10f76931 100644
--- a/src/components/note/content/preview/imageCard.tsx
+++ b/src/components/note/content/preview/imageCard.tsx
@@ -1,11 +1,14 @@
 import Image from 'next/image';
+import { memo } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function ImageCard({ data }: { data: object }) {
+export const ImageCard = memo(function ImageCard({ data }: { data: object }) {
   return (
     <div className={`relative mt-2 flex flex-col overflow-hidden`}>
       <div className="relative h-full w-full rounded-lg border border-zinc-800">
         <Image
+          placeholder="blur"
+          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
           src={data['image']}
           alt={data['image']}
           width="0"
@@ -16,4 +19,4 @@ export default function ImageCard({ data }: { data: object }) {
       </div>
     </div>
   );
-}
+});
diff --git a/src/components/note/content/preview/video.tsx b/src/components/note/content/preview/video.tsx
index 1657ccfd..edab45d7 100644
--- a/src/components/note/content/preview/video.tsx
+++ b/src/components/note/content/preview/video.tsx
@@ -1,7 +1,8 @@
+import { memo } from 'react';
 import ReactPlayer from 'react-player/lazy';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function Video({ data }: { data: object }) {
+export const Video = memo(function Video({ data }: { data: object }) {
   return (
     <div className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-800">
       <ReactPlayer
@@ -14,4 +15,4 @@ export default function Video({ data }: { data: object }) {
       />
     </div>
   );
-}
+});