add loading and optimize query using cache and pwa

2026-05-20 16:08:29 +07:00
parent 5d095151e4
commit ef7aa528d4
8 changed files with 134 additions and 3 deletions
@@ -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>
+  );
+}
@@ -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>
+  );
+}