Merge pull request #5 from PreferredAI/image-lazy-loading

Author: hieuddo

.github/workflows/test-build.yml

@@ -0,0 +1,34 @@
+name: Test Build
+
+on:
+  pull_request:
+    branches: ["main"]
+
+# Cancel in-progress runs for the same PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build with Next.js
+        run: pnpm build

src/app/layout.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Link from "next/link";
+import Image from "next/image";
 import Navigation from "@/components/Navigation";
 import TeamPhotos from "@/components/TeamPhotos";
 import { getAllCategories } from "@/lib/markdown-posts";
+import BrandLogo from "@/assets/Brand.png";
 
 export const metadata: Metadata = {
   title: "Preferred.AI",
@@ -30,10 +32,11 @@ export default function RootLayout({
               <div className="flex items-center justify-between gap-4 py-6">
                 <Link href="/" className="inline-block">
                   <div className="flex items-center gap-3">
-                    <img
-                      src="/Brand.png"
+                    <Image
+                      src={BrandLogo}
                       alt="Preferred.AI"
                       className="h-16 w-auto"
+                      priority
                     />
                     <p className="hidden text-sm italic text-gray-600 lg:block">
                       Preferences and Recommendations from Data & AI

src/assets/Brand.png

@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "next/image";
+
 import { useState, useEffect } from "react";
 import { TEAM_PHOTOS } from "@/data/teamPhotos";
 
@@ -40,9 +42,12 @@ export default function TeamPhotos() {
             isVisible ? "opacity-100" : "opacity-0"
           }`}
         >
-          <img
+          <Image
             src={TEAM_PHOTOS[currentIndex].url}
             alt={`${TEAM_PHOTOS[currentIndex].date} - ${TEAM_PHOTOS[currentIndex].location}`}
+            width={0}
+            height={0}
+            sizes="100vw"
             className="h-auto w-full object-cover"
           />
         </div>

src/components/TeamPhotos.tsx

@@ -36,6 +36,7 @@ export default function rehypeFigure() {
               ...node,
               properties: {
                 ...node.properties,
+                loading: 'lazy',
               },
             },
           ],