Suspense #

// ANTI-PATTERN: Loading state manual di setiap komponen
func Dashboard() *Element {
    user, setUser := useState(nil)
    orders, setOrders := useState(nil)
    stats, setStats := useState(nil)
    userLoading, setUserLoading := useState(true)
    ordersLoading, setOrdersLoading := useState(true)
    statsLoading, setStatsLoading := useState(true)

    useEffect(func() {
        fetchUser().then(func(data any) {
            setUser(data)
            setUserLoading(false)
        })
        fetchOrders().then(func(data any) {
            setOrders(data)
            setOrdersLoading(false)
        })
        fetchStats().then(func(data any) {
            setStats(data)
            setStatsLoading(false)
        })
    })

    return renderFragment(
        renderConditional(userLoading, renderUserSkeleton(), renderUserProfile(user)),
        renderConditional(ordersLoading, renderOrdersSkeleton(), renderRecentOrders(orders)),
        renderConditional(statsLoading, renderStatsSkeleton(), renderStatsCards(stats)),
    )
}

// Masalah:
// → Boilerplate loading state di setiap komponen
// → Tidak konsisten — setiap developer bisa implement berbeda
// → Sulit mengkoordinasikan urutan munculnya konten
// → Komponen data fetching dan loading UI tercampur

// BENAR: Suspense boundary mengelola loading state
func Dashboard() *Element {
    return renderFragment(
        renderSuspense(renderUserSkeleton(), func() *Element {
            return renderUserProfile() // Fetch data-nya sendiri
        }),
        renderSuspense(renderOrdersSkeleton(), func() *Element {
            return renderRecentOrders() // Fetch data-nya sendiri
        }),
        renderSuspense(renderStatsSkeleton(), func() *Element {
            return renderStatsCards() // Fetch data-nya sendiri
        }),
    )
}

// Keuntungan:
// → Setiap section loading secara independen
// → Komponen fokus pada rendering, bukan loading management
// → Loading state konsisten dan terpusat

// React.lazy — Suspense untuk Code Splitting
// (React adalah framework API — ini menunjukkan logika lazy-loading yang setara)
var HeavyChart = lazyLoad(func() *Element { return loadComponent("HeavyChart") })
var DataTable = lazyLoad(func() *Element { return loadComponent("DataTable") })
var RichEditor = lazyLoad(func() *Element { return loadComponent("RichEditor") })

func ReportPage() *Element {
    return renderFragment(
        renderReportHeader(), // Tidak lazy — dimuat segera

        renderSuspense(renderChartSkeleton(300), func() *Element {
            return renderHeavyChart(reportData)
        }),

        renderSuspense(renderTableSkeleton(10), func() *Element {
            return renderDataTable()
        }),
    )
}

// React otomatis:
// 1. Mulai download HeavyChart.chunk.js
// 2. Tampilkan <ChartSkeleton /> selama download
// 3. Saat download selesai, gantikan skeleton dengan komponen asli
// 4. Tidak ada if (loading) sama sekali di komponen parent

// Suspense dengan Data Fetching (React 18 + React Query)
// (React adalah framework API — ini menunjukkan logika suspense yang setara)
func UserProfile(userId string) *Element {
    // Tidak ada loading state — komponen suspend otomatis
    user := useSuspenseQuery("user", userId, func() any { return fetchUser(userId) })

    // Kode ini hanya dieksekusi saat user sudah tersedia
    return renderFragment(
        renderImage(user.Avatar, user.Name),
        renderHeading(user.Name),
        renderParagraph(user.Email),
    )
}

// Parent tidak perlu tahu tentang loading state UserProfile
func ProfilePage(userId string) *Element {
    return renderSuspense(renderProfileSkeleton(), func() *Element {
        return renderUserProfile(userId)
    })
}

// ANTI-PATTERN: Satu boundary untuk semua → konten cepat menunggu konten lambat
func Dashboard() *Element {
    return renderSuspense(renderFullPageSkeleton(), func() *Element {
        return renderFragment(
            renderUserProfile(),    // ready dalam 200ms
            renderRecentOrders(),   // ready dalam 800ms
            renderHeavyAnalytics(), // ready dalam 3000ms!
        )
    })
}
// UserProfile dan RecentOrders harus menunggu HeavyAnalytics (3 detik!)
// Seluruh halaman skeleton sampai HeavyAnalytics selesai

// BENAR: Boundary per section → setiap bagian muncul segera saat siap
func Dashboard() *Element {
    return renderFragment(
        // Konten yang hampir selalu cepat — boundary di atas bersama
        renderSuspense(renderHeaderSkeleton(), func() *Element { return renderDashboardHeader() }),

        // Konten yang kecepatannya independen — boundary terpisah
        renderSuspense(renderUserSkeleton(), func() *Element { return renderUserProfile() }),
        renderSuspense(renderOrdersSkeleton(), func() *Element { return renderRecentOrders() }),

        // Konten berat — boundary sendiri di bagian bawah
        renderSuspense(renderAnalyticsSkeleton(), func() *Element { return renderHeavyAnalytics() }),
    )
}
// UserProfile muncul di 200ms, RecentOrders di 800ms, HeavyAnalytics di 3000ms
// User sudah bisa lihat dan interact dengan sebagian konten jauh lebih awal

// Suspense dan Error Boundary
// (React adalah framework API — ini menunjukkan logika penanganan error yang setara)
// Komponen untuk menampilkan error dengan opsi retry
func ErrorFallback(error Error, resetErrorBoundary func()) *Element {
    return renderFragment(
        renderParagraph("Gagal memuat data: "+error.Message),
        renderButton("Coba Lagi", resetErrorBoundary),
    )
}

// Kombinasi ErrorBoundary + Suspense untuk satu section
func OrdersSection() *Element {
    return renderErrorBoundary(
        func() *Element { return renderErrorFallback(error, resetErrorBoundary) },
        renderSuspense(renderOrdersSkeleton(), func() *Element { return renderRecentOrders() }),
    )
}

// Order yang benar: ErrorBoundary di luar Suspense
// Jika ErrorBoundary di dalam Suspense:
// → Error dari RecentOrders tidak akan tertangkap ErrorBoundary
//   karena Suspense meng-intercept lebih dulu

// useTransition — Suspense untuk Navigasi
// (React adalah framework API — ini menunjukkan logika transisi yang setara)
func ProductFilter() *Element {
    category, setCategory := useState("all")
    isPending, startTransition := useTransition()

    handleCategoryChange := func(newCategory string) {
        startTransition(func() {
            // Update state ini di-mark sebagai "non-urgent"
            // React akan tetap tampilkan konten lama sampai update selesai
            // tanpa menampilkan skeleton/fallback
            setCategory(newCategory)
        })
    }

    return renderFragment(
        renderCategoryButtons(
            category,
            handleCategoryChange,
            isPending, // tampilkan indikator loading ringan di button
                       // tanpa menggantikan seluruh content dengan skeleton
        ),
        renderConditional(isPending, renderLoadingBar(), nil), // Progress bar tipis
        renderSuspense(renderProductSkeleton(), func() *Element {
            return renderProductList(category)
        }),
    )
}

// Backend Go — Streaming HTML dengan placeholder + inject
package main

import (
    "fmt"
    "net/http"
    "time"
)

func dashboardHandler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "text/html; charset=utf-8")
    w.Header().Set("X-Content-Type-Options", "nosniff")
    // Transfer-Encoding: chunked otomatis saat menggunakan Flusher

    flusher, ok := w.(http.Flusher)
    if !ok {
        http.Error(w, "Streaming not supported", http.StatusInternalServerError)
        return
    }

    // === LANGKAH 1: Kirim shell halaman segera ===
    fmt.Fprint(w, `<!DOCTYPE html>
<html>
<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="/app.css">
</head>
<body>
  <nav>Dashboard Nav</nav>
  <main>
    <h1>Dashboard</h1>

    <!-- Placeholder untuk products — tampil segera sebagai skeleton -->
    <div id="products-container">
      <div class="skeleton skeleton-list"></div>
    </div>

    <!-- Placeholder untuk rekomendasi -->
    <div id="reco-container">
      <div class="skeleton skeleton-grid"></div>
    </div>
  </main>
  <footer>Footer</footer>
  <script src="/app.js"></script>
`)
    flusher.Flush()  // Kirim segera ke browser

    // === LANGKAH 2: Fetch data products (simulasi 200ms) ===
    time.Sleep(200 * time.Millisecond)
    products := fetchProducts()  // actual DB query

    // Inject konten ke placeholder via script
    fmt.Fprintf(w, `<script>
document.getElementById('products-container').innerHTML = %q;
</script>`, renderProductsHTML(products))
    flusher.Flush()

    // === LANGKAH 3: Fetch rekomendasi (simulasi 1.5s) ===
    time.Sleep(1300 * time.Millisecond)  // total 1.5s
    recommendations := fetchRecommendations()

    fmt.Fprintf(w, `<script>
document.getElementById('reco-container').innerHTML = %q;
</script>`, renderRecoHTML(recommendations))
    flusher.Flush()

    // Tutup koneksi
    fmt.Fprint(w, `</body></html>`)
}

// React Server Components + Suspense (Next.js App Router)
// (React adalah framework API — ini menunjukkan logika setara dalam Go)
// Server Component — fetch data langsung di komponen
func UserProfile(userId string) *Element {
    user := dbFindUserByID(userId)  // langsung query DB di server
    return renderFragment(
        renderImage(user.Avatar, user.Name),
        renderHeading(user.Name),
    )
}

func RecentOrders(userId string) *Element {
    orders := dbFindOrdersByUser(userId)  // bisa lebih lambat
    return renderOrdersList(orders)
}

func Analytics() *Element {
    stats := fetchExternalAnalytics()  // bisa sangat lambat
    return renderStatsCards(stats)
}

// Page adalah server component yang compose komponen-komponen di atas
func DashboardPage(params Params) *Element {
    return renderFragment(
        // UserProfile render di server, di-stream ke client saat ready
        renderSuspense(renderProfileSkeleton(), func() *Element {
            return renderUserProfile(params.ID)
        }),

        renderSuspense(renderOrdersSkeleton(), func() *Element {
            return renderRecentOrders(params.ID)
        }),

        // Analytics bisa lambat — letakkan di bawah dengan boundary terpisah
        renderSuspense(renderAnalyticsSkeleton(), func() *Element {
            return renderAnalytics()
        }),
    )
}

// Next.js / React otomatis:
// 1. Render shell halaman segera
// 2. Stream setiap section saat data-nya siap di server
// 3. Browser menerima dan menampilkan konten secara bertahap
// → Tidak ada waterfall request dari client ke API
// → TTFB tetap rendah karena shell dikirim segera

// ANTI-PATTERN: Spinner generik tidak informatif
renderSuspense(renderDiv("Loading..."), func() *Element { return renderProductList() })
// User tidak tahu struktur apa yang akan muncul
// Layout shift parah saat konten muncul (CLS tinggi)

// BENAR: Skeleton yang menyerupai konten asli
func ProductListSkeleton() *Element {
    return renderDivClass("product-grid",
        renderCards(8, func(i int) *Element {
            return renderDivClass("product-card-skeleton",
                renderSkeleton("skeleton-image", 200),
                renderSkeletonText("80%"),
                renderSkeletonText("60%"),
                renderSkeletonText("40%"),
            )
        }),
    )
}

renderSuspense(renderProductListSkeleton(), func() *Element { return renderProductList() })
// Keuntungan:
// → User tahu akan ada 8 kartu produk
// → Tidak ada layout shift saat konten muncul (CLS rendah)
// → Terasa "loading", bukan "broken"

// ✗ Anti-pattern: satu boundary global
func App() *Element {
    return renderSuspense(renderFullPageSpinner(), func() *Element {
        return renderRouter(
            renderRoute("/", renderHome()),
            renderRoute("/dashboard", renderDashboard()),
        )
    })
}
// Jika satu komponen kecil di Dashboard suspend → seluruh app jadi spinner!

// ✓ Solusi: Suspense boundary di level yang tepat
func App() *Element {
    return renderRouter(
        renderRoute("/", func() *Element {
            return renderSuspense(renderHomeSkeleton(), func() *Element { return renderHome() })
        }),
        renderRoute("/dashboard", func() *Element {
            return renderSuspense(renderDashboardSkeleton(), func() *Element { return renderDashboard() })
        }),
    )
}

// ✗ Anti-pattern: Suspense tanpa Error Boundary
renderSuspense(renderSkeleton(), func() *Element {
    return renderDataComponent() // Jika fetch gagal → error tidak tertangkap!
})
// Error dari DataComponent akan propagate ke atas dan crash

// ✓ Solusi: Selalu pasangkan dengan Error Boundary
renderErrorBoundary(
    func() *Element { return renderErrorFallback() },
    renderSuspense(renderSkeleton(), func() *Element { return renderDataComponent() }),
)

// ✗ Anti-pattern: fallback dengan dimensi yang salah
renderSuspense(renderDivStyle("height: 50px", "Loading..."), func() *Element {
    return renderProductList() // ProductList sebenarnya 800px tingginya
})
// Saat konten muncul: layout shift dari 50px ke 800px = CLS tinggi!

// ✓ Solusi: Skeleton dengan dimensi yang mendekati konten asli
renderSuspense(renderProductListSkeleton(), func() *Element { return renderProductList() }) // ~800px, 8 card