add loading and optimize query using cache and pwa

app/(public)/loading.tsx

@@ -0,0 +1,17 @@
+/**
+ * Skeleton generik untuk route group `(public)` — fallback streaming bagi
+ * halaman yang tidak punya `loading.tsx` sendiri (beranda, profil, dll).
+ */
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-10">
+      <div className="h-8 w-1/2 animate-pulse rounded-xl bg-neutral-200" />
+      <div className="mt-4 space-y-3">
+        <div className="h-4 w-full animate-pulse rounded bg-neutral-100" />
+        <div className="h-4 w-5/6 animate-pulse rounded bg-neutral-100" />
+        <div className="h-4 w-2/3 animate-pulse rounded bg-neutral-100" />
+      </div>
+      <div className="mt-8 h-64 animate-pulse rounded-2xl bg-neutral-100" />
+    </div>
+  );
+}

app/(public)/trips/[id]/loading.tsx

@@ -0,0 +1,31 @@
+/** Skeleton halaman detail trip — tampil instan saat data masih di-fetch. */
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-4 sm:py-8">
+      <div className="mb-3 h-4 w-40 animate-pulse rounded bg-neutral-200 sm:mb-4" />
+
+      <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm">
+        <div className="h-44 animate-pulse bg-neutral-200 sm:h-56 lg:h-72" />
+
+        <div className="border-b border-neutral-100 px-4 py-4 sm:px-6">
+          <div className="h-6 w-2/3 animate-pulse rounded bg-neutral-200" />
+          <div className="mt-2 h-4 w-1/3 animate-pulse rounded bg-neutral-100" />
+        </div>
+
+        <div className="space-y-5 p-4 sm:space-y-6 sm:p-6">
+          <div className="grid grid-cols-2 gap-2 sm:gap-3">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div
+                key={i}
+                className="h-16 animate-pulse rounded-xl bg-neutral-100 sm:h-[72px]"
+              />
+            ))}
+          </div>
+          <div className="h-24 animate-pulse rounded-xl bg-neutral-100" />
+          <div className="h-32 animate-pulse rounded-xl bg-neutral-100" />
+          <div className="h-12 animate-pulse rounded-xl bg-neutral-200" />
+        </div>
+      </div>
+    </div>
+  );
+}

app/(public)/trips/loading.tsx

@@ -0,0 +1,29 @@
+/** Skeleton daftar trip — tampil instan saat list masih di-fetch. */
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
+      <div className="mb-6 h-8 w-56 animate-pulse rounded-lg bg-neutral-200 sm:mb-8" />
+      <div className="mb-6 h-40 animate-pulse rounded-2xl bg-neutral-100" />
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className="overflow-hidden rounded-2xl border border-neutral-200 bg-white"
+          >
+            <div className="h-40 animate-pulse bg-neutral-200" />
+            <div className="space-y-3 p-4">
+              <div className="h-5 w-3/4 animate-pulse rounded bg-neutral-200" />
+              <div className="h-4 w-1/2 animate-pulse rounded bg-neutral-100" />
+              <div className="h-4 w-2/3 animate-pulse rounded bg-neutral-100" />
+              <div className="mt-3 flex items-center justify-between border-t border-neutral-100 pt-3">
+                <div className="h-5 w-20 animate-pulse rounded bg-neutral-200" />
+                <div className="h-4 w-16 animate-pulse rounded bg-neutral-100" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/manifest.ts

@@ -0,0 +1,31 @@
+import type { MetadataRoute } from "next";
+import { siteConfig } from "@/lib/site";
+
+/**
+ * Web app manifest — dideteksi otomatis oleh Next App Router (`<link
+ * rel="manifest">` di-inject). Mendukung "Add to Home Screen" di mobile.
+ */
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: `${siteConfig.name} — ${siteConfig.slogan}`,
+    short_name: siteConfig.name,
+    description: siteConfig.description,
+    start_url: "/",
+    display: "standalone",
+    background_color: "#f9fafb",
+    theme_color: "#16a34a",
+    icons: [
+      {
+        src: "/images/SeTrip.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/SeTrip.ico",
+        sizes: "any",
+        type: "image/x-icon",
+      },
+    ],
+  };
+}

app/robots.ts

@@ -7,7 +7,14 @@ export default function robots(): MetadataRoute.Robots {
       {
         userAgent: "*",
         allow: "/",
-        disallow: ["/api/", "/profile", "/create-trip"],
+        disallow: [
+          "/api/",
+          "/admin",
+          "/profile",
+          "/create-trip",
+          "/verify",
+          "/trips/*/payment",
+        ],
       },
     ],
     sitemap: absoluteUrl("/sitemap.xml"),

app/sitemap.ts

@@ -24,6 +24,12 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       changeFrequency: "hourly",
       priority: 0.9,
     },
+    {
+      url: absoluteUrl("/people"),
+      lastModified: now,
+      changeFrequency: "daily",
+      priority: 0.7,
+    },
     {
       url: absoluteUrl("/register"),
       lastModified: now,

next.config.ts

@@ -3,6 +3,10 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   images: {
     dangerouslyAllowSVG: true,
+    // AVIF didahulukan — ~30% lebih kecil dari WebP, didukung browser modern.
+    formats: ["image/avif", "image/webp"],
+    // Cache hasil optimasi minimal 1 hari supaya tidak re-optimize tiap request.
+    minimumCacheTTL: 86400,
     remotePatterns: [
       {
         protocol: "https",

server/services/trip.service.ts

@@ -1,3 +1,4 @@
+import { cache } from "react";
 import { Prisma } from "@/app/generated/prisma/client";
 import type { ActivityCategory, Vibe } from "@/app/generated/prisma/enums";
 import { tripRepo, type TripFilters } from "@/server/repositories/trip.repo";
@@ -38,13 +39,18 @@ export const tripService = {
     return tripRepo.findAll();
   },
 
-  async getTripById(id: string) {
+  /**
+   * Ambil trip by id. Dibungkus `React.cache()` — `generateMetadata`, body
+   * halaman, dan `opengraph-image` memanggil ini untuk id yang sama dalam satu
+   * request, jadi query Prisma yang berat ini cukup jalan sekali per request.
+   */
+  getTripById: cache(async (id: string) => {
     const trip = await tripRepo.findById(id);
     if (!trip) {
       throw new Error("Trip tidak ditemukan");
     }
     return trip;
-  },
+  }),
 
   async createTrip(input: CreateTripInput) {
     if (isTripDepartureDayPast(input.date)) {