refactor(ui): render images through one component

apps/platform/src/components/shared/image.tsx

@@ -1,13 +1,24 @@
 import type { ImgHTMLAttributes } from 'react'
 
-type ImageProps = ImgHTMLAttributes<HTMLImageElement>
+type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  /** Set on anything visible before the page is scrolled. */
+  priority?: boolean
+}
 
-const Image = ({ src, ...rest }: ImageProps) => {
+const Image = ({ src, priority = false, ...rest }: ImageProps) => {
   if (!src) {
     return null
   }
 
-  return <img loading="lazy" {...rest} src={src} />
+  return (
+    <img
+      loading={priority ? 'eager' : 'lazy'}
+      fetchPriority={priority ? 'high' : undefined}
+      decoding="async"
+      {...rest}
+      src={src}
+    />
+  )
 }
 
 Image.displayName = 'Image'

apps/platform/src/features/flow-editor/icons/provider-icons.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 import type { ReactNode } from 'react'
 
 import type { IconSource } from '@/features/flow-editor/types'
+import { Image } from '@/components/shared/image'
 import { cn } from '@/lib/utils'
 import { useThemeStore } from '@/stores/theme-store'
 
@@ -18,11 +19,10 @@ export type ProviderIconComponent = (props: IconProps) => ReactNode
 const builtIcons = new Map<string, ProviderIconComponent>()
 
 const artwork = (source: string, className?: string) => (
-  <img
+  <Image
     src={source}
     alt=""
     aria-hidden
-    loading="lazy"
     className={cn('size-4 object-contain', className)}
   />
 )

apps/platform/src/features/navigation/components/logo.tsx

@@ -26,6 +26,7 @@ const PlatformLogo = ({ width = 200, height = 40, className = '' }) => {
 
   return (
     <Image
+      priority
       src={`/assets/images/${logoName}`}
       alt={t('ui.text.platformLogo')}
       width={width}

apps/platform/src/features/organizations/components/history/output-renderer.tsx

@@ -12,6 +12,7 @@ import {
   Copy,
   Table,
 } from 'lucide-react'
+import { Image } from '@/components/shared/image'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import toast from '@/lib/toast'
@@ -94,11 +95,10 @@ const TextOutput = ({ value }: { value: string }) => (
 const ImageOutput = ({ value }: { value: string }) => (
   <div className="rounded-lg overflow-hidden border">
     <a href={value} target="_blank" rel="noopener noreferrer">
-      <img
+      <Image
         src={value}
         alt={i18next.t('ui.text.dataOutput')}
         className="max-w-full max-h-80 object-contain bg-muted/30"
-        loading="lazy"
       />
     </a>
     <div className="flex items-center justify-between p-2 bg-muted/30 text-xs">

apps/platform/src/layouts/auth-layout.tsx

@@ -24,6 +24,7 @@ const AuthLayout = () => {
       <div className="flex min-h-app-screen flex-col bg-background">
         <div className="flex flex-1 md:flex">
           <Image
+            priority
             src={`/assets/images/${landingImg}`}
             alt={t('ui.text.platformPreview')}
             className="hidden w-1/2 object-cover md:block"