fix(ui): add useBrowser hook and update image-block component

A new useBrowser hook is implemented to determine the user's browser. The image-block component from the web application has been updated to utilize this hook. A conditional transition feature is added to the image-block component, which allows image zooming transition only on Chrome desktop to prevent image flickering.

apps/web/src/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from './use-browser';
 export * from './use-media-query';
 export * from './use-time-distance';

apps/web/src/hooks/use-browser.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+type Browser = 'internet explorer' | 'edge' | 'chrome' | 'safari' | 'firefox' | 'opera' | 'other';
+
+export const useBrowser = () => {
+  const [browser, setBrowser] = React.useState<Browser | null>(null);
+
+  React.useEffect(() => {
+    const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
+    const isOpera = !!window.opr;
+    const isEdge = window.navigator.userAgent.indexOf('Edge') > -1;
+
+    if (/Trident|MSIE/.test(userAgent)) setBrowser('internet explorer');
+    else if (isEdge) setBrowser('edge');
+    else if (/Chrome/.test(userAgent) && !isOpera && !isEdge) setBrowser('chrome');
+    else if (/Safari/.test(userAgent) && !isOpera && !isEdge) setBrowser('safari');
+    else if (/Firefox/.test(userAgent)) setBrowser('firefox');
+    else if (isOpera || /OPR/.test(userAgent)) setBrowser('opera');
+    else setBrowser('other');
+  }, []);
+
+  return { browser };
+};

apps/web/src/ui/post/blocks/image-block/index.tsx

@@ -7,13 +7,14 @@ import { motion } from 'framer-motion';
 
 import { cn } from '@kkhys/ui';
 
+import { useBrowser, useMediaQuery } from '#/hooks';
+
 const NextImage = ({
   src,
   alt,
   width,
   height,
   blurDataURL,
-  loading,
   onClick,
   layoutId,
   className,
@@ -31,7 +32,6 @@ const NextImage = ({
       sizes='(min-width: 768px) 42rem, 100vw'
       placeholder={blurDataURL ? 'blur' : 'empty'}
       blurDataURL={blurDataURL}
-      loading={loading}
       quality={90}
       className={cn('w-full rounded-2xl border-[#474747] shadow dark:border dark:shadow-none', className)}
       onClick={onClick}
@@ -55,6 +55,10 @@ export const ImageBlock = ({
 }) => {
   const [isOpen, setOpen] = React.useState(false);
 
+  const { browser } = useBrowser();
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const allowTransition = browser === 'chrome' && isDesktop;
+
   React.useEffect(() => {
     const handleScroll = () => {
       if (isOpen) setOpen(false);
@@ -76,16 +80,15 @@ export const ImageBlock = ({
         height={height as number}
         blurDataURL={blurDataURL}
         onClick={() => setOpen(!isOpen)}
-        // I don't like to use it too much, but it causes image flickering, so I specify it.
-        loading='eager'
-        layoutId={src}
+        layoutId={allowTransition ? src : undefined}
         className={cn(!isOpen && 'cursor-zoom-in')}
       />
       {isOpen && (
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          transition={{ duration: 0.4 }}
           onClick={() => setOpen(false)}
           className='fixed inset-0 z-20 bg-background/80 backdrop-blur-[2px]'
         >
@@ -95,7 +98,7 @@ export const ImageBlock = ({
             width={width as number}
             height={height as number}
             onClick={() => setOpen(!isOpen)}
-            layoutId={src}
+            layoutId={allowTransition ? src : undefined}
             className={cn('fixed inset-0 z-30 m-auto w-[1100px]', isOpen ? 'cursor-zoom-out' : 'cursor-zoom-in')}
           />
         </motion.div>