From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 13 Jan 2024 10:35:22 +0700 Subject: Refactor src migrate folder --- src-migrate/components/ui/image.tsx | 46 +++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src-migrate/components/ui/image.tsx (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx new file mode 100644 index 00000000..a91b2a9d --- /dev/null +++ b/src-migrate/components/ui/image.tsx @@ -0,0 +1,46 @@ +import clsx from 'clsx'; +import NextImage, { ImageProps as NextImageProps } from 'next/image'; +import { useState } from 'react'; + +import clsxm from '~/libs/clsxm'; + +type ImageProps = { + rounded?: string; + classNames?: { + wrapper: string + } +} & NextImageProps; + +const Image = (props: ImageProps) => { + const { alt, src, className, classNames, rounded, ...rest } = props; + const [isLoading, setLoading] = useState(true); + + return ( +
+ setLoading(false)} + {...rest} + /> +
+ ); +}; +export default Image; \ No newline at end of file -- cgit v1.2.3 From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 16 Jan 2024 16:08:43 +0700 Subject: Update improve product detail performance --- src-migrate/components/ui/image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index a91b2a9d..c7ed0b0e 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,7 +26,7 @@ const Image = (props: ImageProps) => { > Date: Wed, 17 Jan 2024 09:54:59 +0700 Subject: Update image for performance --- src-migrate/components/ui/image.tsx | 43 +++++++++++++------------------------ 1 file changed, 15 insertions(+), 28 deletions(-) (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c7ed0b0e..c1dde170 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -1,4 +1,3 @@ -import clsx from 'clsx'; import NextImage, { ImageProps as NextImageProps } from 'next/image'; import { useState } from 'react'; @@ -6,41 +5,29 @@ import clsxm from '~/libs/clsxm'; type ImageProps = { rounded?: string; - classNames?: { - wrapper: string - } } & NextImageProps; const Image = (props: ImageProps) => { - const { alt, src, className, classNames, rounded, ...rest } = props; + const { alt, src, className, rounded, ...rest } = props; const [isLoading, setLoading] = useState(true); return ( -
- setLoading(false)} - {...rest} - /> -
+ src={src} + alt={alt} + loading='lazy' + quality={100} + onLoadingComplete={() => setLoading(false)} + {...rest} + /> ); }; export default Image; \ No newline at end of file -- cgit v1.2.3 From e7054b1ff60aae39f255210ff0cfa2217e8d844c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 19 Jan 2024 13:45:56 +0700 Subject: Add unique timestamp on image component --- src-migrate/components/ui/image.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c1dde170..a65d4ec7 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -11,6 +11,8 @@ const Image = (props: ImageProps) => { const { alt, src, className, rounded, ...rest } = props; const [isLoading, setLoading] = useState(true); + const uniqueTimestamp = new Date().getTime(); + return ( { rounded, className )} - src={src} + src={`${src}?v=${uniqueTimestamp}`} alt={alt} loading='lazy' quality={100} -- cgit v1.2.3 From fea243da06cef56a1ccd212b9273e02678750237 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 19 Jan 2024 13:57:33 +0700 Subject: Fix image component --- src-migrate/components/ui/image.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index a65d4ec7..c1dde170 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -11,8 +11,6 @@ const Image = (props: ImageProps) => { const { alt, src, className, rounded, ...rest } = props; const [isLoading, setLoading] = useState(true); - const uniqueTimestamp = new Date().getTime(); - return ( { rounded, className )} - src={`${src}?v=${uniqueTimestamp}`} + src={src} alt={alt} loading='lazy' quality={100} -- cgit v1.2.3 From e49eba371229a643588d49d7ef408b6ef9469d53 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 19 Jan 2024 14:34:17 +0700 Subject: Update image component with unoptimized --- src-migrate/components/ui/image.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c1dde170..de0ad1da 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,6 +26,7 @@ const Image = (props: ImageProps) => { loading='lazy' quality={100} onLoadingComplete={() => setLoading(false)} + unoptimized {...rest} /> ); -- cgit v1.2.3 From 1c5849265622dab23b99b2ffdbf7ced3b65d30cd Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 22 Jan 2024 11:01:28 +0700 Subject: Update package and image components --- src-migrate/components/ui/image.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index de0ad1da..c1dde170 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,7 +26,6 @@ const Image = (props: ImageProps) => { loading='lazy' quality={100} onLoadingComplete={() => setLoading(false)} - unoptimized {...rest} /> ); -- cgit v1.2.3 From e5f95cc1fd8381c8f8d96d9ad3aded14afbfdb91 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 22 Jan 2024 13:02:47 +0700 Subject: Update image component --- src-migrate/components/ui/image.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src-migrate/components/ui/image.tsx') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c1dde170..de0ad1da 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,6 +26,7 @@ const Image = (props: ImageProps) => { loading='lazy' quality={100} onLoadingComplete={() => setLoading(false)} + unoptimized {...rest} /> ); -- cgit v1.2.3