feat: image optimize

Signed-off-by: Innei <i@innei.in>

src/components/layout/header/internal/Activity.tsx

@@ -12,6 +12,7 @@ import {
   useActivity,
 } from '~/atoms/activity'
 import { FloatPopover } from '~/components/ui/float-popover'
+import { softBouncePrest } from '~/constants/spring'
 import useDebounceValue from '~/hooks/common/use-debounce-value'
 import { apiClient } from '~/lib/request'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
@@ -135,15 +136,20 @@ export const Activity = memo(() => {
           <m.div
             key={processName}
             className="pointer-events-auto absolute bottom-0 right-0 top-0 z-[10] flex items-center overflow-hidden md:right-[-25px]"
-            initial={false}
+            initial={{
+              opacity: 0.2,
+              y: 15,
+            }}
             animate={{
               opacity: 1,
               x: 0,
+              y: 0,
             }}
             exit={{
-              opacity: 0.2,
+              opacity: 0,
               x: -10,
             }}
+            transition={softBouncePrest}
           >
             <FloatPopover
               TriggerComponent={TriggerComponent}
@@ -174,8 +180,7 @@ const TriggerComponent = memo<{
       src={`/apps/${appLabels[processName]}.png`}
       alt={processName}
       priority
-      fetchPriority="high"
-      unoptimized
+      fetchPriority="low"
       className="pointer-events-none select-none"
     />
   )

src/components/ui/image/ZoomedImage.tsx

@@ -1,8 +1,16 @@
 'use client'
 
 import { isServer } from '@tanstack/react-query'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import mediumZoom from 'medium-zoom'
+import Image from 'next/image'
 import { tv } from 'tailwind-variants'
 import type { Zoom } from 'medium-zoom'
 import type { FC, ReactNode } from 'react'
@@ -116,10 +124,10 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
               </a>
             </div>
           )}
-          <img
+          <OptimizedImage
             src={src}
             title={title}
-            alt={alt}
+            alt={alt || title || ''}
             ref={imageRef}
             onLoad={() => {
               setImageLoadStatusSafe(ImageLoadStatus.Loaded)
@@ -238,3 +246,35 @@ const NoFixedPlaceholder = ({ accent }: { accent?: string }) => {
     />
   )
 }
+
+// @ts-expect-error
+const OptimizedImage: FC<React.JSX.IntrinsicElements['img']> = forwardRef(
+  (
+    {
+      src,
+      alt,
+      placeholder,
+
+      ...rest
+    },
+    ref,
+  ) => {
+    const { height, width } = useMarkdownImageRecord(src!) || {}
+    if (!height || !width)
+      return <img alt={alt} src={src} ref={ref} {...rest} />
+    return (
+      <Image
+        alt={alt || ''}
+        fetchPriority="high"
+        priority
+        src={src!}
+        {...rest}
+        height={height}
+        width={width}
+        ref={ref as any}
+      />
+    )
+  },
+)
+
+OptimizedImage.displayName = 'OptimizedImage'

src/components/widgets/shared/EmbedGithubFile.tsx

@@ -84,12 +84,17 @@ export const EmbedGithubFile = memo(
     })
 
     if (isLoading) {
-      return <Loading loadingText="Loading GitHub File Preview..." />
+      return (
+        <Loading
+          className="h-[50vh]"
+          loadingText="Loading GitHub File Preview..."
+        />
+      )
     }
 
     if (isError) {
       return (
-        <pre className="flex h-[60px] flex-wrap center">
+        <pre className="flex h-[50vh] flex-wrap rounded-md border border-uk-orange-light center">
           <code>Loading GitHub File Preview Failed:</code>
           <br />
           <code>