From ef113c075437c8abaf77d9d8e8aa229b329b06d3 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Mon, 1 May 2023 11:48:10 +0700
Subject: [PATCH 01/19] improve: initial suspense page translate

---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index dd9312055..ba2c9d764 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -4,7 +4,7 @@ title: <Suspense>
 
 <Intro>
 
-`<Suspense>` lets you display a fallback until its children have finished loading.
+`<Suspense>` memungkinkan Anda menampilkan fallback sampai komponent children selesai dimuat.
 
 
 ```js

From 6b28cf4d509eb8f0a09e6ef2d3747d46cf635cd1 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Mon, 1 May 2023 11:55:00 +0700
Subject: [PATCH 02/19] improve: fix typo

---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index ba2c9d764..c223a93d8 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -4,7 +4,7 @@ title: <Suspense>
 
 <Intro>
 
-`<Suspense>` memungkinkan Anda menampilkan fallback sampai komponent children selesai dimuat.
+`<Suspense>` memungkinkan Anda menampilkan fallback sampai komponen children selesai dimuat.
 
 
 ```js

From ce28e6b2a410d130e4793807da5541af40753488 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Mon, 1 May 2023 12:00:53 +0700
Subject: [PATCH 03/19] improve: add new translation

---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index c223a93d8..3fc5f8454 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -24,7 +24,7 @@ title: <Suspense>
 ### `<Suspense>` {/*suspense*/}
 
 #### Props {/*props*/}
-* `children`: The actual UI you intend to render. If `children` suspends while rendering, the Suspense boundary will switch to rendering `fallback`.
+* `children`: UI aktual yang ingin Anda render. Jika `children` ditangguhkan sewaktu merender, batas Suspense akan beralih merender `fallback`.
 * `fallback`: An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton. Suspense will automatically switch to `fallback` when `children` suspends, and back to `children` when the data is ready. If `fallback` suspends while rendering, it will activate the closest parent Suspense boundary.
 
 #### Caveats {/*caveats*/}

From 77bdbf307dc1351f2b9cfaedfdf879d23e064bb3 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Mon, 1 May 2023 12:06:34 +0700
Subject: [PATCH 04/19] improve: add new translation

---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 3fc5f8454..73a19d2c3 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -25,7 +25,7 @@ title: <Suspense>
 
 #### Props {/*props*/}
 * `children`: UI aktual yang ingin Anda render. Jika `children` ditangguhkan sewaktu merender, batas Suspense akan beralih merender `fallback`.
-* `fallback`: An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton. Suspense will automatically switch to `fallback` when `children` suspends, and back to `children` when the data is ready. If `fallback` suspends while rendering, it will activate the closest parent Suspense boundary.
+* `fallback`: UI alternatif untuk dirender menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan rendering, itu akan mengaktifkan induk terdekat dari Suspense Boundary.
 
 #### Caveats {/*caveats*/}
 

From 76953f072d00066a6e7b5ba5f4eb6bd683b96b5f Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sat, 6 May 2023 22:07:53 +0700
Subject: [PATCH 05/19] improve: add new translation

---
 src/content/reference/react/Suspense.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 73a19d2c3..4409ab8fd 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -25,11 +25,11 @@ title: <Suspense>
 
 #### Props {/*props*/}
 * `children`: UI aktual yang ingin Anda render. Jika `children` ditangguhkan sewaktu merender, batas Suspense akan beralih merender `fallback`.
-* `fallback`: UI alternatif untuk dirender menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan rendering, itu akan mengaktifkan induk terdekat dari Suspense Boundary.
+* `fallback`: UI alternatif untuk dirender menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan rendering, itu akan mengaktifkan induk terdekat dari batas Suspense.
 
 #### Caveats {/*caveats*/}
 
-- React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch.
+- React tidak menyimpan state apa pun untuk render yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React will retry rendering the suspended tree from scratch.
 - If Suspense was displaying content for the tree, but then it suspended again, the `fallback` will be shown again unless the update causing it was caused by [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue).
 - If React needs to hide the already visible content because it suspended again, it will clean up [layout Effects](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden.
 - React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.

From bac22648c08a49eb65832689bf66678fa1c0b865 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sat, 6 May 2023 23:08:14 +0700
Subject: [PATCH 06/19] improve: add new translation

---
 src/content/reference/react/Suspense.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 4409ab8fd..aad610ab1 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -29,9 +29,9 @@ title: <Suspense>
 
 #### Caveats {/*caveats*/}
 
-- React tidak menyimpan state apa pun untuk render yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React will retry rendering the suspended tree from scratch.
-- If Suspense was displaying content for the tree, but then it suspended again, the `fallback` will be shown again unless the update causing it was caused by [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue).
-- If React needs to hide the already visible content because it suspended again, it will clean up [layout Effects](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden.
+- React tidak menyimpan state apa pun untuk render yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React akan mencoba merender ulang komponen yang ditangguhkan dari awal.
+- Jika Suspense menampilkan konten untuk komponen, namun kemudian ditangguhkan lagi, `fallback` akan ditampilkan lagi kecuali jika pembaruan yang menyebabkannya, disebabkan oleh [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
+- Jika React perlu menyembunyikan konten yang sudah terlihat karena ditangguhkan lagi, ini akan membersihkan [layout Effects](/reference/react/useLayoutEffect) yang ada di dalam konten komponen. Ketika konten siap untuk ditampilkan lagi, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden.
 - React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.
 
 ---

From f3b0662a93ee415f153d104a99ab3057dbc0c671 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sun, 7 May 2023 19:00:32 +0700
Subject: [PATCH 07/19] improve: translate cavear section

---
 src/content/reference/react/Suspense.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index aad610ab1..976824e86 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -19,7 +19,7 @@ title: <Suspense>
 
 ---
 
-## Reference {/*reference*/}
+## Referensi {/*reference*/}
 
 ### `<Suspense>` {/*suspense*/}
 
@@ -27,16 +27,16 @@ title: <Suspense>
 * `children`: UI aktual yang ingin Anda render. Jika `children` ditangguhkan sewaktu merender, batas Suspense akan beralih merender `fallback`.
 * `fallback`: UI alternatif untuk dirender menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan rendering, itu akan mengaktifkan induk terdekat dari batas Suspense.
 
-#### Caveats {/*caveats*/}
+#### Catatan Penting {/*caveats*/}
 
 - React tidak menyimpan state apa pun untuk render yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React akan mencoba merender ulang komponen yang ditangguhkan dari awal.
 - Jika Suspense menampilkan konten untuk komponen, namun kemudian ditangguhkan lagi, `fallback` akan ditampilkan lagi kecuali jika pembaruan yang menyebabkannya, disebabkan oleh [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
-- Jika React perlu menyembunyikan konten yang sudah terlihat karena ditangguhkan lagi, ini akan membersihkan [layout Effects](/reference/react/useLayoutEffect) yang ada di dalam konten komponen. Ketika konten siap untuk ditampilkan lagi, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden.
-- React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.
+- Jika React perlu menyembunyikan konten yang sudah terlihat karena ditangguhkan lagi, ini akan membersihkan [layout Effects](/reference/react/useLayoutEffect) yang ada di dalam konten komponen. Ketika konten siap untuk ditampilkan lagi, React akan menjalankan Efek tata letak lagi. Hal ini memastikan bahwa Efek yang mengukur tata letak DOM tidak mencoba melakukan hal ini saat konten disembunyikan.
+- React menyertakan pengoptimalan di *under the hood* *Streaming Server Rendering* dan *Selective Hydration* yang terintegrasi dengan Suspense. Baca [tinjauan arsitektural](https://github.com/reactwg/react-18/discussions/37) dan tonton [sebuah pembicaraan teknis](https://www.youtube.com/watch?v=pj5N-Khihgc) untuk belajar lebih lanjut.
 
 ---
 
-## Usage {/*usage*/}
+## Pengunaan {/*usage*/}
 
 ### Displaying a fallback while content is loading {/*displaying-a-fallback-while-content-is-loading*/}
 

From e5adf332d859043e257d60fb53268d09c9edd861 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sun, 7 May 2023 19:14:57 +0700
Subject: [PATCH 08/19] improve: translate reveal section

---
 src/content/reference/react/Suspense.md | 48 +++++++++++++------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 976824e86..19791c349 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -38,9 +38,9 @@ title: <Suspense>
 
 ## Pengunaan {/*usage*/}
 
-### Displaying a fallback while content is loading {/*displaying-a-fallback-while-content-is-loading*/}
+### Menampilkan fallback saat konten sedang dimuat {/*displaying-a-fallback-while-content-is-loading*/}
 
-You can wrap any part of your application with a Suspense boundary:
+Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan Batas Suspense:
 
 ```js [[1, 1, "<Loading />"], [2, 2, "<Albums />"]]
 <Suspense fallback={<Loading />}>
@@ -48,9 +48,9 @@ You can wrap any part of your application with a Suspense boundary:
 </Suspense>
 ```
 
-React will display your <CodeStep step={1}>loading fallback</CodeStep> until all the code and data needed by <CodeStep step={2}>the children</CodeStep> has been loaded.
+React akan menampilkan kode <CodeStep step={1}>loading fallback</CodeStep> sampai semua kode dan data yang dibutuhkan oleh <CodeStep step={2}>the children</CodeStep> telah dimuat.
 
-In the example below, the `Albums` component *suspends* while fetching the list of albums. Until it's ready to render, React switches the closest Suspense boundary above to show the fallback--your `Loading` component. Then, when the data loads, React hides the `Loading` fallback and renders the `Albums` component with data.
+Pada contoh di bawah ini, Komponen `Albums` *menangguhkan* saat mengambil daftar album. Hingga siap untuk dirender, React mengganti batas Suspense terdekat di atas untuk menunjukkan fallback--Anda  `Loading` Komponen. Kemudian, saat data dimuat, React menyembunyikan fallback `Loading` dan merender komponen `Albums` dengan data.
 
 <Sandpack>
 
@@ -117,11 +117,11 @@ function Loading() {
 ```js Albums.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah kerangka kerja
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
@@ -136,8 +136,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi nyata ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -163,9 +163,9 @@ function use(promise) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 
@@ -185,7 +185,7 @@ async function getData(url) {
 }
 
 async function getAlbums() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu untuk membuat penantian menjadi nyata.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -250,24 +250,28 @@ async function getAlbums() {
 
 <Note>
 
-**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+**Hanya sumber data yang diaktifkan Suspense yang akan mengaktifkan komponen Suspense.** Mereka termasuk:
 
 - Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Lazy-loading component code with [`lazy`](/reference/react/lazy)
 
-Suspense **does not** detect when data is fetched inside an Effect or event handler.
+Suspense **tidak** mendeteksi ketika data diambil di dalam Effect atau event handler.
 
-The exact way you would load data in the `Albums` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
 
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+Cara yang tepat untuk memuat data dalam komponen `Albums` di atas tergantung pada kerangka kerja Anda. Jika Anda menggunakan kerangka kerja yang mendukung Suspense, Anda akan menemukan detailnya dalam dokumentasi pengambilan data.
+
+Pengambilan data yang mendukung Suspense tanpa menggunakan kerangka kerja yang mendukung belum didukung. Persyaratan untuk mengimplementasikan sumber data yang mendukung Suspense masih belum stabil dan belum terdokumentasi. API resmi untuk mengintegrasikan sumber data dengan Suspense akan dirilis pada versi React yang akan datang. 
+ 
 
 </Note>
 
 ---
 
-### Revealing content together at once {/*revealing-content-together-at-once*/}
+### Mengungkap konten secara bersamaan sekaligus {/*revealing-content-together-at-once*/}
+
+
+Secara default, seluruh pohon di dalam Suspense diperlakukan sebagai satu kesatuan. Sebagai contoh, meskipun *hanya satu* dari komponen-komponen ini yang tertahan menunggu beberapa data, *semua* komponen tersebut akan digantikan oleh indikator pemuatan:
 
-By default, the whole tree inside Suspense is treated as a single unit. For example, even if *only one* of these components suspends waiting for some data, *all* of them together will be replaced by the loading indicator:
 
 ```js {2-5}
 <Suspense fallback={<Loading />}>
@@ -278,9 +282,9 @@ By default, the whole tree inside Suspense is treated as a single unit. For exam
 </Suspense>
 ```
 
-Then, after all of them are ready to be displayed, they will all appear together at once.
+Kemudian, setelah semuanya siap untuk ditampilkan, semuanya akan muncul sekaligus.
 
-In the example below, both `Biography` and `Albums` fetch some data. However, because they are grouped under a single Suspense boundary, these components always "pop in" together at the same time.
+Pada contoh di bawah ini, baik `Biography` dan `Album` mengambil beberapa data. Namun, karena dikelompokkan di bawah satu batas Suspense, komponen-komponen ini selalu "muncul" bersamaan.
 
 <Sandpack>
 

From 138efc15ede60c286277f0a120e069e8c80eadb2 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sun, 7 May 2023 19:34:49 +0700
Subject: [PATCH 09/19] improve: translate reveal section

---
 src/content/reference/react/Suspense.md | 85 +++++++++++++------------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 19791c349..c558f56e7 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -366,11 +366,11 @@ export default function Panel({ children }) {
 ```js Biography.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah kerangka kerja
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
@@ -381,8 +381,8 @@ export default function Biography({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi nyata ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -410,11 +410,11 @@ function use(promise) {
 ```js Albums.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah kerangka kerja
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
@@ -429,8 +429,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi nyata ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -456,9 +456,9 @@ function use(promise) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 
@@ -566,7 +566,7 @@ async function getAlbums() {
 
 </Sandpack>
 
-Components that load data don't have to be direct children of the Suspense boundary. For example, you can move `Biography` and `Albums` into a new `Details` component. This doesn't change the behavior. `Biography` and `Albums` share the same closest parent Suspense boundary, so their reveal is coordinated together.
+Komponen yang memuat data tidak harus menjadi anak langsung dari batas Suspense. Sebagai contoh, Anda dapat memindahkan `Biografi` dan `Album` ke dalam komponen `Rincian` yang baru. Hal ini tidak akan mengubah perilakunya. `Biografi` dan `Albums` memiliki batas Suspense induk terdekat yang sama, sehingga pengungkapannya dikoordinasikan bersama.
 
 ```js {2,8-11}
 <Suspense fallback={<Loading />}>
@@ -587,9 +587,9 @@ function Details({ artistId }) {
 
 ---
 
-### Revealing nested content as it loads {/*revealing-nested-content-as-it-loads*/}
+### Mengungkap konten yang tersusun saat dimuat {/*revealing-nested-content-as-it-loads*/}
 
-When a component suspends, the closest parent Suspense component shows the fallback. This lets you nest multiple Suspense components to create a loading sequence. Each Suspense boundary's fallback will be filled in as the next level of content becomes available. For example, you can give the album list its own fallback:
+Ketika sebuah komponen ditangguhkan, komponen Suspense induk terdekat akan menampilkan fallback. Hal ini memungkinkan Anda menyatukan beberapa komponen Suspense untuk membuat urutan pemuatan. Fallback setiap batas Suspense akan terisi saat tingkat konten berikutnya tersedia. Sebagai contoh, Anda dapat memberikan daftar album dengan fallback tersendiri:
 
 ```js {3,7}
 <Suspense fallback={<BigSpinner />}>
@@ -602,14 +602,14 @@ When a component suspends, the closest parent Suspense component shows the fallb
 </Suspense>
 ```
 
-With this change, displaying the `Biography` doesn't need to "wait" for the `Albums` to load.
+Dengan perubahan ini, menampilkan `Biography` tidak perlu "menunggu" sampai `Album` dimuat.
 
-The sequence will be:
+Urutan nya adalah sebagai berikut:
 
-1. If `Biography` hasn't loaded yet, `BigSpinner` is shown in place of the entire content area.
-1. Once `Biography` finishes loading, `BigSpinner` is replaced by the content.
-1. If `Albums` hasn't loaded yet, `AlbumsGlimmer` is shown in place of `Albums` and its parent `Panel`.
-1. Finally, once `Albums` finishes loading, it replaces `AlbumsGlimmer`.
+1. Jika `Biography` belum dimuat, `BigSpinner` ditampilkan sebagai pengganti seluruh area konten.
+2. Setelah `Biography` selesai dimuat, `BigSpinner` digantikan oleh konten.
+3. Jika `Albums` belum dimuat, `AlbumsGlimmer` ditampilkan sebagai pengganti `Albums` dan induknya `Panel`.
+4. Akhirnya, setelah `Albums` selesai dimuat, dia akan menggantikan `AlbumsGlimmer`.
 
 <Sandpack>
 
@@ -703,11 +703,11 @@ export default function Panel({ children }) {
 ```js Biography.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
@@ -718,8 +718,9 @@ export default function Biography({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
+
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -747,11 +748,11 @@ function use(promise) {
 ```js Albums.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
@@ -766,8 +767,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -793,9 +794,9 @@ function use(promise) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 
@@ -920,13 +921,13 @@ async function getAlbums() {
 
 </Sandpack>
 
-Suspense boundaries let you coordinate which parts of your UI should always "pop in" together at the same time, and which parts should progressively reveal more content in a sequence of loading states. You can add, move, or delete Suspense boundaries in any place in the tree without affecting the rest of your app's behavior.
+Batas suspense memungkinkan Anda mengoordinasikan bagian mana dari UI Anda yang harus selalu "muncul" bersamaan, dan bagian mana yang harus menampilkan lebih banyak konten secara bertahap dalam urutan status pemuatan. Anda dapat menambah, memindahkan, atau menghapus batas-batas Suspense di mana saja di dalam pohon tanpa memengaruhi perilaku aplikasi Anda yang lain.
 
-Don't put a Suspense boundary around every component. Suspense boundaries should not be more granular than the loading sequence that you want the user to experience. If you work with a designer, ask them where the loading states should be placed--it's likely that they've already included them in their design wireframes.
+Jangan memberikan batas Suspense pada setiap komponen. Batas suspense tidak boleh lebih terperinci daripada urutan pemuatan yang Anda inginkan untuk dialami pengguna. Jika Anda bekerja dengan desainer, tanyakan kepada mereka di mana status pemuatan harus ditempatkan - kemungkinan mereka sudah memasukkannya dalam wireframe desain mereka.
 
 ---
 
-### Showing stale content while fresh content is loading {/*showing-stale-content-while-fresh-content-is-loading*/}
+### Menampilkan konten yang sudah basi saat konten baru sedang dimuat {/*showing-stale-content-while-fresh-content-is-loading*/}
 
 In this example, the `SearchResults` component suspends while fetching the search results. Type `"a"`, wait for the results, and then edit it to `"ab"`. The results for `"a"` will get replaced by the loading fallback.
 

From 602a1f726fb3da485dfc53b9fdf4183118a3aad7 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sun, 7 May 2023 19:43:26 +0700
Subject: [PATCH 10/19] improve: add new translation

---
 src/content/reference/react/Suspense.md | 46 ++++++++++++-------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index c558f56e7..993ada2bb 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -929,7 +929,7 @@ Jangan memberikan batas Suspense pada setiap komponen. Batas suspense tidak bole
 
 ### Menampilkan konten yang sudah basi saat konten baru sedang dimuat {/*showing-stale-content-while-fresh-content-is-loading*/}
 
-In this example, the `SearchResults` component suspends while fetching the search results. Type `"a"`, wait for the results, and then edit it to `"ab"`. The results for `"a"` will get replaced by the loading fallback.
+Dalam contoh ini, komponen `SearchResults` ditangguhkan saat mengambil hasil pencarian. Ketik `"a"`, tunggu untuk hasil, dan kemudian edit menjadi `"ab"`. Hasil untuk `"a"` akan tergantikan oleh *loading fallback*.
 
 <Sandpack>
 
@@ -971,11 +971,11 @@ export default function App() {
 ```js SearchResults.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function SearchResults({ query }) {
   if (query === '') {
@@ -996,8 +996,8 @@ export default function SearchResults({ query }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -1023,9 +1023,9 @@ function use(promise) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 
@@ -1121,7 +1121,7 @@ input { margin: 10px; }
 
 </Sandpack>
 
-A common alternative UI pattern is to *defer* updating the list and to keep showing the previous results until the new results are ready. The [`useDeferredValue`](/reference/react/useDeferredValue) Hook lets you pass a deferred version of the query down: 
+Pola UI alternatif yang umum adalah untuk *menunda* memperbarui daftar dan terus menampilkan hasil sebelumnya hingga hasil yang baru siap. The [`useDeferredValue`](/reference/react/useDeferredValue) Hook memungkinkan Anda meneruskan versi kueri yang ditangguhkan: 
 
 ```js {3,11}
 export default function App() {
@@ -1141,9 +1141,9 @@ export default function App() {
 }
 ```
 
-The `query` will update immediately, so the input will display the new value. However, the `deferredQuery` will keep its previous value until the data has loaded, so `SearchResults` will show the stale results for a bit.
+`query` akan segera diperbarui, sehingga input akan menampilkan nilai baru. Namun, `deferredQuery` akan menyimpan nilai sebelumnya sampai data dimuat, jadi `SearchResults` akan menunjukkan hasil yang sebelumnya untuk sementara waktu.
 
-To make it more obvious to the user, you can add a visual indication when the stale result list is displayed:
+Untuk membuatnya lebih jelas bagi pengguna, Anda bisa menambahkan indikasi visual apabila daftar hasil basi ditampilkan:
 
 ```js {2}
 <div style={{
@@ -1153,7 +1153,7 @@ To make it more obvious to the user, you can add a visual indication when the st
 </div>
 ```
 
-Enter `"a"` in the example below, wait for the results to load, and then edit the input to `"ab"`. Notice how instead of the Suspense fallback, you now see the dimmed stale result list until the new results have loaded:
+Masukkan `"a"` didalam contoh berikut ini, tunggu hingga hasilnya dimuat, lalu edit input ke `"ab"`. Perhatikan, bahwa alih-alih fallback Suspense, Anda sekarang melihat daftar hasil sebelumnya yang diredupkan sampai hasil yang baru dimuat:
 
 
 <Sandpack>
@@ -1200,11 +1200,11 @@ export default function App() {
 ```js SearchResults.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function SearchResults({ query }) {
   if (query === '') {
@@ -1225,8 +1225,8 @@ export default function SearchResults({ query }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -1252,9 +1252,9 @@ function use(promise) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 

From d455b21d344339a78bf2de6dfd50bec9c45b7f55 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sun, 7 May 2023 20:23:28 +0700
Subject: [PATCH 11/19] improve: finish translate suspense page

---
 src/content/reference/react/Suspense.md | 135 ++++++++++++------------
 1 file changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 993ada2bb..3c440afb8 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -1352,15 +1352,15 @@ input { margin: 10px; }
 
 <Note>
 
-Both deferred values and [transitions](#preventing-already-revealed-content-from-hiding) let you avoid showing Suspense fallback in favor of inline indicators. Transitions mark the whole update as non-urgent so they are typically used by frameworks and router libraries for navigation. Deferred values, on the other hand, are mostly useful in application code where you want to mark a part of UI as non-urgent and let it "lag behind" the rest of the UI.
+Baik nilai yang ditangguhkan maupun [transitions](#preventing-already-revealed-content-from-hiding) memungkinkan Anda menghindari menampilkan Suspense fallback demi indikator sebaris. Transisi menandai seluruh pembaruan sebagai tidak mendesak sehingga biasanya digunakan oleh kerangka kerja dan pustaka router untuk navigasi. Nilai yang ditangguhkan, di sisi lain, sebagian besar berguna dalam kode aplikasi di mana Anda ingin menandai bagian dari UI sebagai tidak mendesak dan membiarkannya "tertinggal" dari UI lainnya.
 
 </Note>
 
 ---
 
-### Preventing already revealed content from hiding {/*preventing-already-revealed-content-from-hiding*/}
+### Mencegah konten yang sudah terungkap agar tidak disembunyikan {/*preventing-already-revealed-content-from-hiding*/}
 
-When a component suspends, the closest parent Suspense boundary switches to showing the fallback. This can lead to a jarring user experience if it was already displaying some content. Try pressing this button:
+Ketika sebuah komponen ditangguhkan, batas Suspense induk terdekat akan beralih untuk menampilkan fallback. Hal ini dapat menyebabkan pengalaman pengguna yang mengejutkan jika komponen tersebut sudah menampilkan beberapa konten. Coba tekan tombol ini:
 
 <Sandpack>
 
@@ -1486,11 +1486,11 @@ function AlbumsGlimmer() {
 ```js Albums.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
@@ -1505,8 +1505,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -1534,11 +1534,11 @@ function use(promise) {
 ```js Biography.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
@@ -1549,8 +1549,8 @@ export default function Biography({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -1586,9 +1586,9 @@ export default function Panel({ children }) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 
@@ -1729,9 +1729,9 @@ main {
 
 </Sandpack>
 
-When you pressed the button, the `Router` component rendered `ArtistPage` instead of `IndexPage`. A component inside `ArtistPage` suspended, so the closest Suspense boundary started showing the fallback. The closest Suspense boundary was near the root, so the whole site layout got replaced by `BigSpinner`.
+Saat Anda menekan tombol, `Router` komponen merender `ArtistPage` sebagai gantinya `IndexPage`.Komponen di dalam `ArtistPage` tertangguhkan, sehingga batas Suspense terdekat mulai menunjukkan *fallback*. Batas Suspense terdekat berada di dekat root, sehingga seluruh tata letak situs diganti dengan `BigSpinner`.
 
-To prevent this, you can mark the navigation state update as a *transition* with [`startTransition`:](/reference/react/startTransition)
+Untuk mencegah hal ini, Anda dapat menandai pembaruan status navigasi sebagai *transition* dengan [`startTransition`:](/reference/react/startTransition)
 
 ```js {5,7}
 function Router() {
@@ -1745,7 +1745,7 @@ function Router() {
   // ...
 ```
 
-This tells React that the state transition is not urgent, and it's better to keep showing the previous page instead of hiding any already revealed content. Now clicking the button "waits" for the `Biography` to load:
+Hal ini memberi tahu React bahwa transisi state tidak mendesak, dan lebih baik tetap menampilkan halaman sebelumnya daripada menyembunyikan konten yang sudah ditampilkan. Sekarang klik tombol "menunggu" sampai `Biography` dimuat:
 
 <Sandpack>
 
@@ -1921,11 +1921,11 @@ function use(promise) {
 ```js Biography.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
@@ -1936,8 +1936,8 @@ export default function Biography({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -1973,9 +1973,9 @@ export default function Panel({ children }) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 
@@ -2116,19 +2116,20 @@ main {
 
 </Sandpack>
 
-A transition doesn't wait for *all* content to load. It only waits long enough to avoid hiding already revealed content. For example, the website `Layout` was already revealed, so it would be bad to hide it behind a loading spinner. However, the nested `Suspense` boundary around `Albums` is new, so the transition doesn't wait for it.
+Transisi tidak menunggu *semua* konten dimuat. Ini hanya menunggu cukup lama untuk menghindari menyembunyikan konten yang sudah terungkap. Misalnya, situs web `Layout` sudah terungkap, jadi tidak baik menyembunyikannya di balik *loading spinner*. Namun, batas `Suspense` yang bersusun di sekitar `Albums` adalah hal yang baru, jadi transisinya tidak perlu ditunggu.
+
 
 <Note>
 
-Suspense-enabled routers are expected to wrap the navigation updates into transitions by default.
+Router yang mendukung suspense diharapkan untuk membungkus pembaruan navigasi ke dalam transisi secara bawaan.
 
 </Note>
 
 ---
 
-### Indicating that a transition is happening {/*indicating-that-a-transition-is-happening*/}
+### Mengindikasikan bahwa transisi sedang terjadi {/*indicating-that-a-transition-is-happening*/}
 
-In the above example, once you click the button, there is no visual indication that a navigation is in progress. To add an indicator, you can replace [`startTransition`](/reference/react/startTransition) with [`useTransition`](/reference/react/useTransition) which gives you a boolean `isPending` value. In the example below, it's used to change the website header styling while a transition is happening:
+Pada contoh di atas, setelah Anda mengeklik tombol, tidak ada indikasi visual bahwa navigasi sedang berlangsung. Untuk menambahkan indikator, Anda dapat mengganti [`startTransition`](/reference/react/startTransition) dengan [`useTransition`](/reference/react/useTransition) yang akan memberimu boolean dengan nilai `isPending`. Pada contoh di bawah ini, ini digunakan untuk mengubah gaya tajuk situs web saat transisi terjadi:
 
 <Sandpack>
 
@@ -2259,11 +2260,11 @@ function AlbumsGlimmer() {
 ```js Albums.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
@@ -2278,8 +2279,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -2307,11 +2308,11 @@ function use(promise) {
 ```js Biography.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di versi stabil React.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
   const bio = use(fetchData(`/${artistId}/bio`));
@@ -2322,8 +2323,8 @@ export default function Biography({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -2359,9 +2360,9 @@ export default function Panel({ children }) {
 ```
 
 ```js data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+// Catatan: cara Anda melakukan pengambilan data tergantung pada
+// kerangka kerja yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam kerangka kerja.
 
 let cache = new Map();
 
@@ -2383,7 +2384,7 @@ async function getData(url) {
 }
 
 async function getBio() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu untuk membuat penantian terlihat.
   await new Promise(resolve => {
     setTimeout(resolve, 500);
   });
@@ -2395,7 +2396,7 @@ async function getBio() {
 }
 
 async function getAlbums() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu untuk membuat penantian terlihat.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -2504,27 +2505,27 @@ main {
 
 ---
 
-### Resetting Suspense boundaries on navigation {/*resetting-suspense-boundaries-on-navigation*/}
+### Menyetel ulang batas Suspense pada navigasi {/*resetting-suspense-boundaries-on-navigation*/}
 
-During a transition, React will avoid hiding already revealed content. However, if you navigate to a route with different parameters, you might want to tell React it is *different* content. You can express this with a `key`:
+Selama transisi, React akan menghindari menyembunyikan konten yang sudah ditampilkan. Namun, jika Anda menavigasi ke rute dengan parameter yang berbeda, Anda mungkin ingin memberi tahu React bahwa itu adalah konten yang *berbeda*. Anda dapat mengekspresikan ini dengan sebuah `key`:
 
 ```js
 <ProfilePage key={queryParams.id} />
 ```
 
-Imagine you're navigating within a user's profile page, and something suspends. If that update is wrapped in a transition, it will not trigger the fallback for already visible content. That's the expected behavior.
+Bayangkan Anda sedang menavigasi dalam halaman profil pengguna, dan ada sesuatu yang ditangguhkan. Jika pembaruan itu dibungkus dengan transisi, pembaruan itu tidak akan memicu kemunduran untuk konten yang sudah terlihat. Itulah perilaku yang diharapkan.
 
-However, now imagine you're navigating between two different user profiles. In that case, it makes sense to show the fallback. For example, one user's timeline is *different content* from another user's timeline. By specifying a `key`, you ensure that React treats different users' profiles as different components, and resets the Suspense boundaries during navigation. Suspense-integrated routers should do this automatically.
+Namun, sekarang bayangkan Anda menavigasi di antara dua profil pengguna yang berbeda. Dalam hal ini, masuk akal untuk menampilkan fallback. Sebagai contoh, timeline salah satu pengguna adalah *konten yang berbeda* dengan timeline pengguna lain. Dengan menentukan sebuah `kunci`, Anda memastikan bahwa React memperlakukan profil pengguna yang berbeda sebagai komponen yang berbeda, dan menyetel ulang batas-batas Suspense selama navigasi. Router yang terintegrasi dengan Suspense seharusnya melakukan ini secara otomatis.
 
 ---
+### Menyediakan fallback untuk kesalahan server dan konten khusus klien {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
 
-### Providing a fallback for server errors and client-only content {/*providing-a-fallback-for-server-errors-and-client-only-content*/}
+Jika Anda menggunakan salah satu dari [API perenderan server streaming](/reference/react-dom/server) (atau kerangka kerja yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan render server. Sebagai gantinya, React akan menemukan komponen `<Suspense>` terdekat di atasnya dan menyertakan fallback-nya (seperti *spiner*) ke dalam HTML server yang dihasilkan. Pengguna akan melihat pemintal pada awalnya.
 
-If you use one of the [streaming server rendering APIs](/reference/react-dom/server) (or a framework that relies on them), React will also use your `<Suspense>` boundaries to handle errors on the server. If a component throws an error on the server, React will not abort the server render. Instead, it will find the closest `<Suspense>` component above it and include its fallback (such as a spinner) into the generated server HTML. The user will see a spinner at first.
 
-On the client, React will attempt to render the same component again. If it errors on the client too, React will throw the error and display the closest [error boundary.](/reference/react/Component#static-getderivedstatefromerror) However, if it does not error on the client, React will not display the error to the user since the content was eventually displayed successfully.
+Pada klien, React akan mencoba merender komponen yang sama lagi. Jika terjadi kesalahan pada klien juga, React akan melemparkan kesalahan dan menampilkan [ErrorBoundary terdekat.] (/reference/react/Component/Component#static-getderivedstatefromerror) Namun, jika tidak terjadi kesalahan pada klien, React tidak akan menampilkan kesalahan pada pengguna karena konten pada akhirnya berhasil ditampilkan.
 
-You can use this to opt out some components from rendering on the server. To do this, throw an error in the server environment and then wrap them in a `<Suspense>` boundary to replace their HTML with fallbacks:
+Anda dapat menggunakan ini untuk mengecualikan beberapa komponen dari perenderan di server. Untuk melakukan hal ini, lemparkan kesalahan pada lingkungan server dan kemudian bungkus dengan batas `<Suspense>` untuk mengganti HTML-nya dengan fallback:
 
 ```js
 <Suspense fallback={<Loading />}>
@@ -2539,17 +2540,17 @@ function Chat() {
 }
 ```
 
-The server HTML will include the loading indicator. It will be replaced by the `Chat` component on the client.
+HTML server akan menyertakan indikator pemuatan. Indikator ini akan digantikan oleh komponen `Chat` pada klien.
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## Pemecahan Masalah {/*troubleshooting*/}
 
-### How do I prevent the UI from being replaced by a fallback during an update? {/*preventing-unwanted-fallbacks*/}
+### Bagaimana cara mencegah agar UI tidak diganti dengan fallback selama pembaruan? {/*preventing-unwanted-fallbacks*/}
 
-Replacing visible UI with a fallback creates a jarring user experience. This can happen when an update causes a component to suspend, and the nearest Suspense boundary is already showing content to the user.
+Mengganti UI yang terlihat dengan fallback menciptakan pengalaman pengguna yang mengejutkan. Hal ini dapat terjadi ketika pembaruan menyebabkan sebuah komponen ditangguhkan, dan batas Suspense terdekat sudah menampilkan konten kepada pengguna.
 
-To prevent this from happening, [mark the update as non-urgent using `startTransition`](#preventing-already-revealed-content-from-hiding). During a transition, React will wait until enough data has loaded to prevent an unwanted fallback from appearing:
+Untuk mencegah hal ini terjadi, [tandai pembaruan sebagai tidak mendesak menggunakan  `startTransition`](#preventing-already-revealed-content-from-hiding). Selama transisi, React akan menunggu hingga cukup banyak data yang dimuat untuk mencegah terjadinya fallback yang tidak diinginkan:
 
 ```js {2-3,5}
 function handleNextPageClick() {
@@ -2560,8 +2561,8 @@ function handleNextPageClick() {
 }
 ```
 
-This will avoid hiding existing content. However, any newly rendered `Suspense` boundaries will still immediately display fallbacks to avoid blocking the UI and let the user see the content as it becomes available.
+Ini akan menghindari menyembunyikan konten yang ada. Namun, setiap batas `Suspense` yang baru dirender masih akan segera menampilkan fallback untuk menghindari pemblokiran UI dan membiarkan pengguna melihat konten saat tersedia.
 
-**React will only prevent unwanted fallbacks during non-urgent updates**. It will not delay a render if it's the result of an urgent update. You must opt in with an API like [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue).
+**React hanya akan mencegah fallback yang tidak diinginkan selama pembaruan yang tidak mendesak**. Ini tidak akan menunda render jika itu adalah hasil dari pembaruan yang mendesak. Anda harus ikut serta dengan API seperti [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
 
-If your router is integrated with Suspense, it should wrap its updates into [`startTransition`](/reference/react/startTransition) automatically.
+Jika router Anda terintegrasi dengan Suspense, router akan membungkus pembaruannya menjadi [`startTransition`](/reference/react/startTransition) secara otomatis.

From d7092beb13f163ea2719190598545e496a64dc93 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Sun, 7 May 2023 20:26:49 +0700
Subject: [PATCH 12/19] improve: make props feel like italiano

---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 3c440afb8..bc9e157b3 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -23,7 +23,7 @@ title: <Suspense>
 
 ### `<Suspense>` {/*suspense*/}
 
-#### Props {/*props*/}
+#### *Props* {/*props*/}
 * `children`: UI aktual yang ingin Anda render. Jika `children` ditangguhkan sewaktu merender, batas Suspense akan beralih merender `fallback`.
 * `fallback`: UI alternatif untuk dirender menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan rendering, itu akan mengaktifkan induk terdekat dari batas Suspense.
 

From d0c539bb1f4af4f443af017decff41e8894df502 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <maulanasdqn@gmail.com>
Date: Fri, 19 May 2023 22:17:10 +0700
Subject: [PATCH 13/19] improve: fixing render text change it to italiano

---
 src/content/reference/react/Suspense.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index bc9e157b3..e8e50f7d7 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -24,12 +24,12 @@ title: <Suspense>
 ### `<Suspense>` {/*suspense*/}
 
 #### *Props* {/*props*/}
-* `children`: UI aktual yang ingin Anda render. Jika `children` ditangguhkan sewaktu merender, batas Suspense akan beralih merender `fallback`.
-* `fallback`: UI alternatif untuk dirender menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan rendering, itu akan mengaktifkan induk terdekat dari batas Suspense.
+* `children`: UI aktual yang ingin Anda *render*. Jika `children` ditangguhkan sewaktu me-*render*, batas Suspense akan beralih me-*render* `fallback`.
+* `fallback`: UI alternatif untuk di-*render* menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan *rendering*, itu akan mengaktifkan induk terdekat dari batas Suspense.
 
 #### Catatan Penting {/*caveats*/}
 
-- React tidak menyimpan state apa pun untuk render yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React akan mencoba merender ulang komponen yang ditangguhkan dari awal.
+- React tidak menyimpan state apa pun untuk me-*render* yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React akan mencoba me-*render* ulang komponen yang ditangguhkan dari awal.
 - Jika Suspense menampilkan konten untuk komponen, namun kemudian ditangguhkan lagi, `fallback` akan ditampilkan lagi kecuali jika pembaruan yang menyebabkannya, disebabkan oleh [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
 - Jika React perlu menyembunyikan konten yang sudah terlihat karena ditangguhkan lagi, ini akan membersihkan [layout Effects](/reference/react/useLayoutEffect) yang ada di dalam konten komponen. Ketika konten siap untuk ditampilkan lagi, React akan menjalankan Efek tata letak lagi. Hal ini memastikan bahwa Efek yang mengukur tata letak DOM tidak mencoba melakukan hal ini saat konten disembunyikan.
 - React menyertakan pengoptimalan di *under the hood* *Streaming Server Rendering* dan *Selective Hydration* yang terintegrasi dengan Suspense. Baca [tinjauan arsitektural](https://github.com/reactwg/react-18/discussions/37) dan tonton [sebuah pembicaraan teknis](https://www.youtube.com/watch?v=pj5N-Khihgc) untuk belajar lebih lanjut.
@@ -50,7 +50,7 @@ Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan Batas Suspense:
 
 React akan menampilkan kode <CodeStep step={1}>loading fallback</CodeStep> sampai semua kode dan data yang dibutuhkan oleh <CodeStep step={2}>the children</CodeStep> telah dimuat.
 
-Pada contoh di bawah ini, Komponen `Albums` *menangguhkan* saat mengambil daftar album. Hingga siap untuk dirender, React mengganti batas Suspense terdekat di atas untuk menunjukkan fallback--Anda  `Loading` Komponen. Kemudian, saat data dimuat, React menyembunyikan fallback `Loading` dan merender komponen `Albums` dengan data.
+Pada contoh di bawah ini, Komponen `Albums` *menangguhkan* saat mengambil daftar album. Hingga siap untuk di-*render*, React mengganti batas Suspense terdekat di atas untuk menunjukkan fallback--Anda  `Loading` Komponen. Kemudian, saat data dimuat, React menyembunyikan fallback `Loading` dan me-*render* komponen `Albums` dengan data.
 
 <Sandpack>
 
@@ -1729,7 +1729,7 @@ main {
 
 </Sandpack>
 
-Saat Anda menekan tombol, `Router` komponen merender `ArtistPage` sebagai gantinya `IndexPage`.Komponen di dalam `ArtistPage` tertangguhkan, sehingga batas Suspense terdekat mulai menunjukkan *fallback*. Batas Suspense terdekat berada di dekat root, sehingga seluruh tata letak situs diganti dengan `BigSpinner`.
+Saat Anda menekan tombol, `Router` komponen me-*render* `ArtistPage` sebagai gantinya `IndexPage`.Komponen di dalam `ArtistPage` tertangguhkan, sehingga batas Suspense terdekat mulai menunjukkan *fallback*. Batas Suspense terdekat berada di dekat root, sehingga seluruh tata letak situs diganti dengan `BigSpinner`.
 
 Untuk mencegah hal ini, Anda dapat menandai pembaruan status navigasi sebagai *transition* dengan [`startTransition`:](/reference/react/startTransition)
 
@@ -2520,10 +2520,10 @@ Namun, sekarang bayangkan Anda menavigasi di antara dua profil pengguna yang ber
 ---
 ### Menyediakan fallback untuk kesalahan server dan konten khusus klien {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
 
-Jika Anda menggunakan salah satu dari [API perenderan server streaming](/reference/react-dom/server) (atau kerangka kerja yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan render server. Sebagai gantinya, React akan menemukan komponen `<Suspense>` terdekat di atasnya dan menyertakan fallback-nya (seperti *spiner*) ke dalam HTML server yang dihasilkan. Pengguna akan melihat pemintal pada awalnya.
+Jika Anda menggunakan salah satu dari [API perenderan server streaming](/reference/react-dom/server) (atau kerangka kerja yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan *render* server. Sebagai gantinya, React akan menemukan komponen `<Suspense>` terdekat di atasnya dan menyertakan fallback-nya (seperti *spiner*) ke dalam HTML server yang dihasilkan. Pengguna akan melihat pemintal pada awalnya.
 
 
-Pada klien, React akan mencoba merender komponen yang sama lagi. Jika terjadi kesalahan pada klien juga, React akan melemparkan kesalahan dan menampilkan [ErrorBoundary terdekat.] (/reference/react/Component/Component#static-getderivedstatefromerror) Namun, jika tidak terjadi kesalahan pada klien, React tidak akan menampilkan kesalahan pada pengguna karena konten pada akhirnya berhasil ditampilkan.
+Pada klien, React akan mencoba me-*render* komponen yang sama lagi. Jika terjadi kesalahan pada klien juga, React akan melemparkan kesalahan dan menampilkan [ErrorBoundary terdekat.] (/reference/react/Component/Component#static-getderivedstatefromerror) Namun, jika tidak terjadi kesalahan pada klien, React tidak akan menampilkan kesalahan pada pengguna karena konten pada akhirnya berhasil ditampilkan.
 
 Anda dapat menggunakan ini untuk mengecualikan beberapa komponen dari perenderan di server. Untuk melakukan hal ini, lemparkan kesalahan pada lingkungan server dan kemudian bungkus dengan batas `<Suspense>` untuk mengganti HTML-nya dengan fallback:
 
@@ -2561,8 +2561,8 @@ function handleNextPageClick() {
 }
 ```
 
-Ini akan menghindari menyembunyikan konten yang ada. Namun, setiap batas `Suspense` yang baru dirender masih akan segera menampilkan fallback untuk menghindari pemblokiran UI dan membiarkan pengguna melihat konten saat tersedia.
+Ini akan menghindari menyembunyikan konten yang ada. Namun, setiap batas `Suspense` yang baru di-*render* masih akan segera menampilkan fallback untuk menghindari pemblokiran UI dan membiarkan pengguna melihat konten saat tersedia.
 
-**React hanya akan mencegah fallback yang tidak diinginkan selama pembaruan yang tidak mendesak**. Ini tidak akan menunda render jika itu adalah hasil dari pembaruan yang mendesak. Anda harus ikut serta dengan API seperti [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
+**React hanya akan mencegah fallback yang tidak diinginkan selama pembaruan yang tidak mendesak**. Ini tidak akan menunda *render* jika itu adalah hasil dari pembaruan yang mendesak. Anda harus ikut serta dengan API seperti [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
 
 Jika router Anda terintegrasi dengan Suspense, router akan membungkus pembaruannya menjadi [`startTransition`](/reference/react/startTransition) secara otomatis.

From d57e94908c631aa4a5d50d7c33f9ea8b9861c683 Mon Sep 17 00:00:00 2001
From: Chris Qiang <chris@christianto.net>
Date: Sun, 6 Aug 2023 18:06:45 +0700
Subject: [PATCH 14/19] feat: translate Susense page (WIP) [skip ci]

- Latest line: 567
---
 src/content/reference/react/Suspense.md | 188 ++++++++++++------------
 1 file changed, 93 insertions(+), 95 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index e8e50f7d7..605e023cd 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -4,7 +4,7 @@ title: <Suspense>
 
 <Intro>
 
-`<Suspense>` memungkinkan Anda menampilkan fallback sampai komponen children selesai dimuat.
+`<Suspense>` memungkinkan Anda menampilkan *fallback* sampai komponen anak-anaknya selesai dimuat.
 
 
 ```js
@@ -24,15 +24,15 @@ title: <Suspense>
 ### `<Suspense>` {/*suspense*/}
 
 #### *Props* {/*props*/}
-* `children`: UI aktual yang ingin Anda *render*. Jika `children` ditangguhkan sewaktu me-*render*, batas Suspense akan beralih me-*render* `fallback`.
-* `fallback`: UI alternatif untuk di-*render* menggantikan UI yang sebenarnya jika belum selesai dimuat. Setiap node React yang valid akan diterima, meskipun dalam praktiknya, fallback adalah tampilan placeholder yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan *rendering*, itu akan mengaktifkan induk terdekat dari batas Suspense.
+* `children`: UI sebenarnya yang ingin Anda *render*. Jika `children` ditangguhkan saat di-*render*, maka Suspense akan beralih me-*render* `fallback`.
+* `fallback`: UI alternatif untuk di-*render* menggantikan UI yang sebenarnya jika belum selesai dimuat. Simpul React apapun yang valid akan diterima, meskipun dalam praktiknya, *fallback* adalah tampilan pengganti yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan *rendering*, induk terdekat dari batasan Suspense akan diaktifkan.
 
 #### Catatan Penting {/*caveats*/}
 
-- React tidak menyimpan state apa pun untuk me-*render* yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React akan mencoba me-*render* ulang komponen yang ditangguhkan dari awal.
-- Jika Suspense menampilkan konten untuk komponen, namun kemudian ditangguhkan lagi, `fallback` akan ditampilkan lagi kecuali jika pembaruan yang menyebabkannya, disebabkan oleh [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
-- Jika React perlu menyembunyikan konten yang sudah terlihat karena ditangguhkan lagi, ini akan membersihkan [layout Effects](/reference/react/useLayoutEffect) yang ada di dalam konten komponen. Ketika konten siap untuk ditampilkan lagi, React akan menjalankan Efek tata letak lagi. Hal ini memastikan bahwa Efek yang mengukur tata letak DOM tidak mencoba melakukan hal ini saat konten disembunyikan.
-- React menyertakan pengoptimalan di *under the hood* *Streaming Server Rendering* dan *Selective Hydration* yang terintegrasi dengan Suspense. Baca [tinjauan arsitektural](https://github.com/reactwg/react-18/discussions/37) dan tonton [sebuah pembicaraan teknis](https://www.youtube.com/watch?v=pj5N-Khihgc) untuk belajar lebih lanjut.
+- React tidak menyimpan *state* apa pun untuk *render*-an yang ditangguhkan sebelum dapat dimuat untuk pertama kalinya. Ketika komponen sudah dimuat, React akan mencoba me-*render* ulang komponen yang ditangguhkan dari awal.
+- Jika *Suspense* menampilkan konten untuk komponen, namun kemudian ditangguhkan lagi, `fallback` akan ditampilkan kembali kecuali jika pembaruan yang menyebabkannya, disebabkan oleh [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
+- Jika React perlu menyembunyikan konten yang sudah terlihat karena ditangguhkan kembali, React akan membersihkan [*layout Effects*](/reference/react/useLayoutEffect) yang ada di dalam konten komponen. Ketika konten siap untuk ditampilkan lagi, React akan menjalankan *layout Effects* lagi. Hal ini memastikan bahwa Efek yang mengukur tata letak DOM tidak mencoba melakukan hal ini saat konten disembunyikan.
+- React menyertakan pengoptimalan di balik layar seperti *Streaming Server Rendering* dan *Selective Hydration* yang terintegrasi dengan *Suspense*. Baca [tinjauan arsitektur]((https://github.com/reactwg/react-18/discussions/37)) dan tonton [diskusi teknis]((https://www.youtube.com/watch?v=pj5N-Khihgc)) untuk mempelajari lebih lanjut.
 
 ---
 
@@ -40,7 +40,7 @@ title: <Suspense>
 
 ### Menampilkan fallback saat konten sedang dimuat {/*displaying-a-fallback-while-content-is-loading*/}
 
-Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan Batas Suspense:
+Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan batasan Suspense:
 
 ```js [[1, 1, "<Loading />"], [2, 2, "<Albums />"]]
 <Suspense fallback={<Loading />}>
@@ -48,9 +48,9 @@ Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan Batas Suspense:
 </Suspense>
 ```
 
-React akan menampilkan kode <CodeStep step={1}>loading fallback</CodeStep> sampai semua kode dan data yang dibutuhkan oleh <CodeStep step={2}>the children</CodeStep> telah dimuat.
+React akan menampilkan <CodeStep step={1}>*fallback* pemuatan</CodeStep> sampai semua kode dan data yang dibutuhkan oleh <CodeStep step={2}>anak-anaknya</CodeStep> telah selesai dimuat.
 
-Pada contoh di bawah ini, Komponen `Albums` *menangguhkan* saat mengambil daftar album. Hingga siap untuk di-*render*, React mengganti batas Suspense terdekat di atas untuk menunjukkan fallback--Anda  `Loading` Komponen. Kemudian, saat data dimuat, React menyembunyikan fallback `Loading` dan me-*render* komponen `Albums` dengan data.
+Pada contoh di bawah ini, Komponen `Albums` *ditangguhkan* saat mengambil daftar album. Hingga siap untuk di-*render*, React mengganti batasan Suspense terdekat di atas untuk menunjukkan *fallback*, komponen `Loading` Anda. Kemudian, saat data termuat, React menyembunyikan *fallback* `Loading` dan me-*render* komponen `Albums` dengan data tersebut.
 
 <Sandpack>
 
@@ -87,7 +87,7 @@ export default function App() {
   } else {
     return (
       <button onClick={() => setShow(true)}>
-        Open The Beatles artist page
+        Buka laman artis The Beatles
       </button>
     );
   }
@@ -110,7 +110,7 @@ export default function ArtistPage({ artist }) {
 }
 
 function Loading() {
-  return <h2>🌀 Loading...</h2>;
+  return <h2>🌀 Memuat...</h2>;
 }
 ```
 
@@ -120,7 +120,7 @@ import { fetchData } from './data.js';
 // Catatan: komponen ini ditulis menggunakan API eksperimental
 // yang belum tersedia di versi stabil React.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah kerangka kerja
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
@@ -136,8 +136,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// Ini adalah solusi untuk bug agar demo dapat berjalan.
-// TODO: ganti dengan implementasi nyata ketika bug sudah diperbaiki.
+// Ini adalah solusi untuk _bug_ agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang benar ketika _bug_ sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -163,9 +163,9 @@ function use(promise) {
 ```
 
 ```js data.js hidden
-// Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// Catatan: cara Anda melakukan pengambilan data bergantung pada
+// _framework_ yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika _caching_ akan berada di dalam _framework_.
 
 let cache = new Map();
 
@@ -180,12 +180,12 @@ async function getData(url) {
   if (url === '/the-beatles/albums') {
     return await getAlbums();
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
 async function getAlbums() {
-  // Tambahkan penundaan palsu untuk membuat penantian menjadi nyata.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -250,27 +250,25 @@ async function getAlbums() {
 
 <Note>
 
-**Hanya sumber data yang diaktifkan Suspense yang akan mengaktifkan komponen Suspense.** Mereka termasuk:
+**Hanya sumber data yang mendukung Suspense yang akan mengaktifkan komponen Suspense.** Sumber data tersebut antara lain:
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Pengambilan data dengan kerangka kerja yang mendukung Suspense seperti [Relay] (https://relay.dev/docs/guided-tour/rendering/loading-states/) dan [Next.js] (https://nextjs.org/docs/getting-started/react-essentials)
+- Pe-*lazy-load*-an kode komponen dengan [`lazy`](/reference/react/lazy)
 
 Suspense **tidak** mendeteksi ketika data diambil di dalam Effect atau event handler.
 
+Cara yang tepat untuk memuat data dalam komponen `Albums` di atas tergantung pada *framework* Anda. Jika Anda menggunakan *framework* yang mendukung Suspense, Anda akan menemukan detailnya dalam dokumentasi pengambilan data.
 
-Cara yang tepat untuk memuat data dalam komponen `Albums` di atas tergantung pada kerangka kerja Anda. Jika Anda menggunakan kerangka kerja yang mendukung Suspense, Anda akan menemukan detailnya dalam dokumentasi pengambilan data.
-
-Pengambilan data yang mendukung Suspense tanpa menggunakan kerangka kerja yang mendukung belum didukung. Persyaratan untuk mengimplementasikan sumber data yang mendukung Suspense masih belum stabil dan belum terdokumentasi. API resmi untuk mengintegrasikan sumber data dengan Suspense akan dirilis pada versi React yang akan datang. 
+Pengambilan data yang mendukung Suspense tanpa menggunakan *framework* yang mendukung belum didukung. Persyaratan untuk mengimplementasikan sumber data yang mendukung Suspense masih belum stabil dan belum terdokumentasi. API resmi untuk mengintegrasikan sumber data dengan Suspense akan dirilis pada versi React yang akan datang. 
  
-
 </Note>
 
 ---
 
-### Mengungkap konten secara bersamaan sekaligus {/*revealing-content-together-at-once*/}
+### Menampilkan konten secara bersamaan sekaligus {/*revealing-content-together-at-once*/}
 
 
-Secara default, seluruh pohon di dalam Suspense diperlakukan sebagai satu kesatuan. Sebagai contoh, meskipun *hanya satu* dari komponen-komponen ini yang tertahan menunggu beberapa data, *semua* komponen tersebut akan digantikan oleh indikator pemuatan:
+Secara *default*, seluruh pohon di dalam Suspense diperlakukan sebagai satu kesatuan. Sebagai contoh, meskipun *hanya satu* dari komponen-komponen ini yang tertahan menunggu beberapa data, *semua* komponen tersebut akan digantikan oleh indikator pemuatan:
 
 
 ```js {2-5}
@@ -284,7 +282,7 @@ Secara default, seluruh pohon di dalam Suspense diperlakukan sebagai satu kesatu
 
 Kemudian, setelah semuanya siap untuk ditampilkan, semuanya akan muncul sekaligus.
 
-Pada contoh di bawah ini, baik `Biography` dan `Album` mengambil beberapa data. Namun, karena dikelompokkan di bawah satu batas Suspense, komponen-komponen ini selalu "muncul" bersamaan.
+Pada contoh di bawah ini, baik `Biography` dan `Album` mengambil beberapa data. Namun, karena mereka dikelompokkan di bawah satu batasan Suspense, komponen-komponen ini akan selalu "muncul" bersamaan.
 
 <Sandpack>
 
@@ -321,7 +319,7 @@ export default function App() {
   } else {
     return (
       <button onClick={() => setShow(true)}>
-        Open The Beatles artist page
+        Buka laman artis The Beatles
       </button>
     );
   }
@@ -349,7 +347,7 @@ export default function ArtistPage({ artist }) {
 }
 
 function Loading() {
-  return <h2>🌀 Loading...</h2>;
+  return <h2>🌀 Memuat...</h2>;
 }
 ```
 
@@ -369,7 +367,7 @@ import { fetchData } from './data.js';
 // Catatan: komponen ini ditulis menggunakan API eksperimental
 // yang belum tersedia di versi stabil React.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah kerangka kerja
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah *framework*
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
@@ -381,8 +379,8 @@ export default function Biography({ artistId }) {
   );
 }
 
-// Ini adalah solusi untuk bug agar demo dapat berjalan.
-// TODO: ganti dengan implementasi nyata ketika bug sudah diperbaiki.
+// Ini adalah solusi untuk _bug_ agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang benar ketika _bug_ sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -413,7 +411,7 @@ import { fetchData } from './data.js';
 // Catatan: komponen ini ditulis menggunakan API eksperimental
 // yang belum tersedia di versi stabil React.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah kerangka kerja
+// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
@@ -429,8 +427,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// Ini adalah solusi untuk bug agar demo dapat berjalan.
-// TODO: ganti dengan implementasi nyata ketika bug sudah diperbaiki.
+// Ini adalah solusi untuk _bug_ agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang benar ketika _bug_ sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -457,8 +455,8 @@ function use(promise) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// _framework_ yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam _framework_.
 
 let cache = new Map();
 
@@ -475,24 +473,24 @@ async function getData(url) {
   } else if (url === '/the-beatles/bio') {
     return await getBio();
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
 async function getBio() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 1500);
   });
 
-  return `The Beatles were an English rock band, 
-    formed in Liverpool in 1960, that comprised 
+  return `The Beatles adalah sebuah band rock asal Inggris, 
+    yang dibentuk di Liverpool pada tahun 1960, yang terdiri dari 
     John Lennon, Paul McCartney, George Harrison 
-    and Ringo Starr.`;
+    dan Ringo Starr.`;
 }
 
 async function getAlbums() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -566,7 +564,7 @@ async function getAlbums() {
 
 </Sandpack>
 
-Komponen yang memuat data tidak harus menjadi anak langsung dari batas Suspense. Sebagai contoh, Anda dapat memindahkan `Biografi` dan `Album` ke dalam komponen `Rincian` yang baru. Hal ini tidak akan mengubah perilakunya. `Biografi` dan `Albums` memiliki batas Suspense induk terdekat yang sama, sehingga pengungkapannya dikoordinasikan bersama.
+Komponen yang memuat data tidak harus menjadi anak langsung dari batasan Suspense. Sebagai contoh, Anda dapat memindahkan `Biografi` dan `Album` ke dalam komponen `Rincian` yang baru. Hal ini tidak akan mengubah perilakunya. `Biografi` dan `Albums` memiliki batasan Suspense induk terdekat yang sama, sehingga pemunculannya dikoordinasikan bersama-sama.
 
 ```js {2,8-11}
 <Suspense fallback={<Loading />}>
@@ -646,7 +644,7 @@ export default function App() {
   } else {
     return (
       <button onClick={() => setShow(true)}>
-        Open The Beatles artist page
+        Buka laman artis The Beatles
       </button>
     );
   }
@@ -676,7 +674,7 @@ export default function ArtistPage({ artist }) {
 }
 
 function BigSpinner() {
-  return <h2>🌀 Loading...</h2>;
+  return <h2>🌀 Memuat...</h2>;
 }
 
 function AlbumsGlimmer() {
@@ -795,8 +793,8 @@ function use(promise) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// *framework* yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam *framework*.
 
 let cache = new Map();
 
@@ -813,24 +811,24 @@ async function getData(url) {
   } else if (url === '/the-beatles/bio') {
     return await getBio();
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
 async function getBio() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 500);
   });
 
-  return `The Beatles were an English rock band, 
-    formed in Liverpool in 1960, that comprised 
+  return `The Beatles adalah sebuah band rock asal Inggris, 
+    yang dibentuk di Liverpool pada tahun 1960, yang terdiri dari 
     John Lennon, Paul McCartney, George Harrison 
-    and Ringo Starr.`;
+    dan Ringo Starr.`;
 }
 
 async function getAlbums() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -1024,8 +1022,8 @@ function use(promise) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// *framework* yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam *framework*.
 
 let cache = new Map();
 
@@ -1040,12 +1038,12 @@ async function getData(url) {
   if (url.startsWith('/search?q=')) {
     return await getSearchResults(url.slice('/search?q='.length));
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
 async function getSearchResults(query) {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 500);
   });
@@ -1253,8 +1251,8 @@ function use(promise) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// *framework* yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam *framework*.
 
 let cache = new Map();
 
@@ -1269,12 +1267,12 @@ async function getData(url) {
   if (url.startsWith('/search?q=')) {
     return await getSearchResults(url.slice('/search?q='.length));
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
 async function getSearchResults(query) {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 500);
   });
@@ -1352,7 +1350,7 @@ input { margin: 10px; }
 
 <Note>
 
-Baik nilai yang ditangguhkan maupun [transitions](#preventing-already-revealed-content-from-hiding) memungkinkan Anda menghindari menampilkan Suspense fallback demi indikator sebaris. Transisi menandai seluruh pembaruan sebagai tidak mendesak sehingga biasanya digunakan oleh kerangka kerja dan pustaka router untuk navigasi. Nilai yang ditangguhkan, di sisi lain, sebagian besar berguna dalam kode aplikasi di mana Anda ingin menandai bagian dari UI sebagai tidak mendesak dan membiarkannya "tertinggal" dari UI lainnya.
+Baik nilai yang ditangguhkan maupun [transitions](#preventing-already-revealed-content-from-hiding) memungkinkan Anda menghindari menampilkan Suspense fallback demi indikator sebaris. Transisi menandai seluruh pembaruan sebagai tidak mendesak sehingga biasanya digunakan oleh *framework* dan pustaka router untuk navigasi. Nilai yang ditangguhkan, di sisi lain, sebagian besar berguna dalam kode aplikasi di mana Anda ingin menandai bagian dari UI sebagai tidak mendesak dan membiarkannya "tertinggal" dari UI lainnya.
 
 </Note>
 
@@ -1423,7 +1421,7 @@ function Router() {
 }
 
 function BigSpinner() {
-  return <h2>🌀 Loading...</h2>;
+  return <h2>🌀 Memuat...</h2>;
 }
 ```
 
@@ -1446,7 +1444,7 @@ export default function Layout({ children }) {
 export default function IndexPage({ navigate }) {
   return (
     <button onClick={() => navigate('/the-beatles')}>
-      Open The Beatles artist page
+      Buka laman artis The Beatles
     </button>
   );
 }
@@ -1587,8 +1585,8 @@ export default function Panel({ children }) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// *framework* yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam *framework*.
 
 let cache = new Map();
 
@@ -1605,24 +1603,24 @@ async function getData(url) {
   } else if (url === '/the-beatles/bio') {
     return await getBio();
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
 async function getBio() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 500);
   });
 
-  return `The Beatles were an English rock band, 
-    formed in Liverpool in 1960, that comprised 
+  return `The Beatles adalah sebuah band rock asal Inggris, 
+    yang dibentuk di Liverpool pada tahun 1960, yang terdiri dari 
     John Lennon, Paul McCartney, George Harrison 
-    and Ringo Starr.`;
+    dan Ringo Starr.`;
 }
 
 async function getAlbums() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -1810,7 +1808,7 @@ function Router() {
 }
 
 function BigSpinner() {
-  return <h2>🌀 Loading...</h2>;
+  return <h2>🌀 Memuat...</h2>;
 }
 ```
 
@@ -1833,7 +1831,7 @@ export default function Layout({ children }) {
 export default function IndexPage({ navigate }) {
   return (
     <button onClick={() => navigate('/the-beatles')}>
-      Open The Beatles artist page
+      Buka laman artis The Beatles
     </button>
   );
 }
@@ -1974,8 +1972,8 @@ export default function Panel({ children }) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// *framework* yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam *framework*.
 
 let cache = new Map();
 
@@ -1992,24 +1990,24 @@ async function getData(url) {
   } else if (url === '/the-beatles/bio') {
     return await getBio();
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
 async function getBio() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 500);
   });
 
-  return `The Beatles were an English rock band, 
-    formed in Liverpool in 1960, that comprised 
+  return `The Beatles adalah sebuah band rock asal Inggris, 
+    yang dibentuk di Liverpool pada tahun 1960, yang terdiri dari 
     John Lennon, Paul McCartney, George Harrison 
-    and Ringo Starr.`;
+    dan Ringo Starr.`;
 }
 
 async function getAlbums() {
-  // Add a fake delay to make waiting noticeable.
+  // Tambahkan penundaan palsu agar penantian data lebih terasa.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -2195,7 +2193,7 @@ function Router() {
 }
 
 function BigSpinner() {
-  return <h2>🌀 Loading...</h2>;
+  return <h2>🌀 Memuat...</h2>;
 }
 ```
 
@@ -2220,7 +2218,7 @@ export default function Layout({ children, isPending }) {
 export default function IndexPage({ navigate }) {
   return (
     <button onClick={() => navigate('/the-beatles')}>
-      Open The Beatles artist page
+      Buka laman artis The Beatles
     </button>
   );
 }
@@ -2361,8 +2359,8 @@ export default function Panel({ children }) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// kerangka kerja yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam kerangka kerja.
+// *framework* yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam *framework*.
 
 let cache = new Map();
 
@@ -2379,7 +2377,7 @@ async function getData(url) {
   } else if (url === '/the-beatles/bio') {
     return await getBio();
   } else {
-    throw Error('Not implemented');
+    throw Error('Tidak diimplementasikan');
   }
 }
 
@@ -2389,10 +2387,10 @@ async function getBio() {
     setTimeout(resolve, 500);
   });
 
-  return `The Beatles were an English rock band, 
-    formed in Liverpool in 1960, that comprised 
+  return `The Beatles adalah sebuah band rock asal Inggris, 
+    yang dibentuk di Liverpool pada tahun 1960, yang terdiri dari 
     John Lennon, Paul McCartney, George Harrison 
-    and Ringo Starr.`;
+    dan Ringo Starr.`;
 }
 
 async function getAlbums() {
@@ -2520,7 +2518,7 @@ Namun, sekarang bayangkan Anda menavigasi di antara dua profil pengguna yang ber
 ---
 ### Menyediakan fallback untuk kesalahan server dan konten khusus klien {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
 
-Jika Anda menggunakan salah satu dari [API perenderan server streaming](/reference/react-dom/server) (atau kerangka kerja yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan *render* server. Sebagai gantinya, React akan menemukan komponen `<Suspense>` terdekat di atasnya dan menyertakan fallback-nya (seperti *spiner*) ke dalam HTML server yang dihasilkan. Pengguna akan melihat pemintal pada awalnya.
+Jika Anda menggunakan salah satu dari [API perenderan server streaming](/reference/react-dom/server) (atau *framework* yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan *render* server. Sebagai gantinya, React akan menemukan komponen `<Suspense>` terdekat di atasnya dan menyertakan fallback-nya (seperti *spiner*) ke dalam HTML server yang dihasilkan. Pengguna akan melihat pemintal pada awalnya.
 
 
 Pada klien, React akan mencoba me-*render* komponen yang sama lagi. Jika terjadi kesalahan pada klien juga, React akan melemparkan kesalahan dan menampilkan [ErrorBoundary terdekat.] (/reference/react/Component/Component#static-getderivedstatefromerror) Namun, jika tidak terjadi kesalahan pada klien, React tidak akan menampilkan kesalahan pada pengguna karena konten pada akhirnya berhasil ditampilkan.

From 5b0edef2aef885f6f63ec09c0295cb539ec36598 Mon Sep 17 00:00:00 2001
From: Chris Qiang <chris@christianto.net>
Date: Thu, 24 Aug 2023 05:36:27 +0700
Subject: [PATCH 15/19] fix: Update comments on the code section

---
 src/content/reference/react/Suspense.md | 82 ++++++++++++-------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 605e023cd..e17d94c2e 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -118,9 +118,9 @@ function Loading() {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah _framework_
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
@@ -365,9 +365,9 @@ export default function Panel({ children }) {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah *framework*
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
@@ -409,9 +409,9 @@ function use(promise) {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah _framework_
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
@@ -702,9 +702,9 @@ export default function Panel({ children }) {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
@@ -747,9 +747,9 @@ function use(promise) {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
@@ -970,9 +970,9 @@ export default function App() {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function SearchResults({ query }) {
@@ -1022,8 +1022,8 @@ function use(promise) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// *framework* yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam *framework*.
+// _framework_ yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam _framework_.
 
 let cache = new Map();
 
@@ -1199,9 +1199,9 @@ export default function App() {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function SearchResults({ query }) {
@@ -1251,8 +1251,8 @@ function use(promise) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// *framework* yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam *framework*.
+// _framework_ yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam _framework_.
 
 let cache = new Map();
 
@@ -1485,9 +1485,9 @@ function AlbumsGlimmer() {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
@@ -1533,9 +1533,9 @@ function use(promise) {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
@@ -1585,8 +1585,8 @@ export default function Panel({ children }) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// *framework* yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam *framework*.
+// _framework_ yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam _framework_.
 
 let cache = new Map();
 
@@ -1871,11 +1871,11 @@ function AlbumsGlimmer() {
 ```js Albums.js hidden
 import { fetchData } from './data.js';
 
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
+// Catatan: komponen ini ditulis menggunakan API eksperimental
+// yang belum tersedia di React versi stabil.
 
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
+// yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
   const albums = use(fetchData(`/${artistId}/albums`));
@@ -1890,8 +1890,8 @@ export default function Albums({ artistId }) {
   );
 }
 
-// This is a workaround for a bug to get the demo running.
-// TODO: replace with real implementation when the bug is fixed.
+// Ini adalah solusi untuk bug agar demo dapat berjalan.
+// TODO: ganti dengan implementasi yang sebenarnya ketika bug sudah diperbaiki.
 function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;
@@ -1920,9 +1920,9 @@ function use(promise) {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
@@ -1972,8 +1972,8 @@ export default function Panel({ children }) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// *framework* yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam *framework*.
+// _framework_ yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam _framework_.
 
 let cache = new Map();
 
@@ -2259,9 +2259,9 @@ function AlbumsGlimmer() {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Albums({ artistId }) {
@@ -2307,9 +2307,9 @@ function use(promise) {
 import { fetchData } from './data.js';
 
 // Catatan: komponen ini ditulis menggunakan API eksperimental
-// yang belum tersedia di versi stabil React.
+// yang belum tersedia di React versi stabil.
 
-// Untuk contoh realistis yang dapat Anda ikuti hari ini, cobalah sebuah framework
+// Untuk contoh realistis yang dapat Anda ikuti saat ini, cobalah _framework_
 // yang terintegrasi dengan Suspense, seperti Relay atau Next.js.
 
 export default function Biography({ artistId }) {
@@ -2359,8 +2359,8 @@ export default function Panel({ children }) {
 
 ```js data.js hidden
 // Catatan: cara Anda melakukan pengambilan data tergantung pada
-// *framework* yang Anda gunakan bersama dengan Suspense.
-// Biasanya, logika caching akan berada di dalam *framework*.
+// _framework_ yang Anda gunakan bersama dengan Suspense.
+// Biasanya, logika caching akan berada di dalam _framework_.
 
 let cache = new Map();
 
@@ -2552,7 +2552,7 @@ Untuk mencegah hal ini terjadi, [tandai pembaruan sebagai tidak mendesak menggun
 
 ```js {2-3,5}
 function handleNextPageClick() {
-  // If this update suspends, don't hide the already displayed content
+  // Jika pembaruan ini ditangguhkan, jangan sembunyikan konten yang sudah ditampilkan
   startTransition(() => {
     setCurrentPage(currentPage + 1);
   });

From 6847f833c5de58491d743de4719b802613615ee7 Mon Sep 17 00:00:00 2001
From: Chris Qiang <chris@christianto.net>
Date: Sat, 26 Aug 2023 17:37:24 +0700
Subject: [PATCH 16/19] fix: Complete the Suspense translations

---
 src/content/reference/react/Suspense.md | 78 ++++++++++++-------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index e17d94c2e..6a923fa36 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -587,7 +587,7 @@ function Details({ artistId }) {
 
 ### Mengungkap konten yang tersusun saat dimuat {/*revealing-nested-content-as-it-loads*/}
 
-Ketika sebuah komponen ditangguhkan, komponen Suspense induk terdekat akan menampilkan fallback. Hal ini memungkinkan Anda menyatukan beberapa komponen Suspense untuk membuat urutan pemuatan. Fallback setiap batas Suspense akan terisi saat tingkat konten berikutnya tersedia. Sebagai contoh, Anda dapat memberikan daftar album dengan fallback tersendiri:
+Ketika sebuah komponen ditangguhkan, komponen Suspense induk terdekat akan menampilkan *fallback*. Hal ini memungkinkan Anda menyatukan beberapa komponen Suspense untuk membuat pemuatan terurut. *Fallback* setiap batasan Suspense akan terisi saat level konten berikutnya tersedia. Sebagai contoh, Anda dapat memberikan daftar album sebuah *fallback*-nya sendiri:
 
 ```js {3,7}
 <Suspense fallback={<BigSpinner />}>
@@ -600,9 +600,9 @@ Ketika sebuah komponen ditangguhkan, komponen Suspense induk terdekat akan menam
 </Suspense>
 ```
 
-Dengan perubahan ini, menampilkan `Biography` tidak perlu "menunggu" sampai `Album` dimuat.
+Dengan perubahan ini, menampilkan `Biography` tidak perlu "menunggu" sampai `Album` termuat.
 
-Urutan nya adalah sebagai berikut:
+Urutan pemuatannya adalah sebagai berikut:
 
 1. Jika `Biography` belum dimuat, `BigSpinner` ditampilkan sebagai pengganti seluruh area konten.
 2. Setelah `Biography` selesai dimuat, `BigSpinner` digantikan oleh konten.
@@ -919,15 +919,15 @@ async function getAlbums() {
 
 </Sandpack>
 
-Batas suspense memungkinkan Anda mengoordinasikan bagian mana dari UI Anda yang harus selalu "muncul" bersamaan, dan bagian mana yang harus menampilkan lebih banyak konten secara bertahap dalam urutan status pemuatan. Anda dapat menambah, memindahkan, atau menghapus batas-batas Suspense di mana saja di dalam pohon tanpa memengaruhi perilaku aplikasi Anda yang lain.
+Batasan Suspense memungkinkan Anda mengkoordinasikan bagian dari UI Anda yang harus selalu "muncul" bersamaan, dan bagian yang harus menampilkan lebih banyak konten secara bertahap dalam urutan status pemuatan. Anda dapat menambah, memindahkan, atau menghapus batasan-batasan Suspense di mana saja di dalam pohon tanpa mempengaruhi perilaku bagian lainnya dari aplikasi Anda.
 
-Jangan memberikan batas Suspense pada setiap komponen. Batas suspense tidak boleh lebih terperinci daripada urutan pemuatan yang Anda inginkan untuk dialami pengguna. Jika Anda bekerja dengan desainer, tanyakan kepada mereka di mana status pemuatan harus ditempatkan - kemungkinan mereka sudah memasukkannya dalam wireframe desain mereka.
+Jangan memberikan batasan Suspense pada setiap komponen. Batas suspense tidak boleh lebih detil daripada urutan pemuatan yang Anda inginkan untuk pengalman pengguna. Jika Anda bekerja dengan desainer, tanyakan kepada mereka di mana status pemuatan harus ditempatkan, kemungkinan mereka sudah memasukkannya dalam *wireframe* desain mereka.
 
 ---
 
 ### Menampilkan konten yang sudah basi saat konten baru sedang dimuat {/*showing-stale-content-while-fresh-content-is-loading*/}
 
-Dalam contoh ini, komponen `SearchResults` ditangguhkan saat mengambil hasil pencarian. Ketik `"a"`, tunggu untuk hasil, dan kemudian edit menjadi `"ab"`. Hasil untuk `"a"` akan tergantikan oleh *loading fallback*.
+Dalam contoh ini, komponen `SearchResults` ditangguhkan saat sedang mengambil hasil pencarian. Ketik `"a"`, tunggu hasilnya, dan kemudian ubah menjadi `"ab"`. Hasil untuk `"a"` akan tergantikan oleh *fallback* pemuatan.
 
 <Sandpack>
 
@@ -955,10 +955,10 @@ export default function App() {
   return (
     <>
       <label>
-        Search albums:
+        Cari album:
         <input value={query} onChange={e => setQuery(e.target.value)} />
       </label>
-      <Suspense fallback={<h2>Loading...</h2>}>
+      <Suspense fallback={<h2>Memuat...</h2>}>
         <SearchResults query={query} />
       </Suspense>
     </>
@@ -981,7 +981,7 @@ export default function SearchResults({ query }) {
   }
   const albums = use(fetchData(`/search?q=${query}`));
   if (albums.length === 0) {
-    return <p>No matches for <i>"{query}"</i></p>;
+    return <p>Tidak ada yang cocok dengan <i>"{query}"</i></p>;
   }
   return (
     <ul>
@@ -1119,7 +1119,7 @@ input { margin: 10px; }
 
 </Sandpack>
 
-Pola UI alternatif yang umum adalah untuk *menunda* memperbarui daftar dan terus menampilkan hasil sebelumnya hingga hasil yang baru siap. The [`useDeferredValue`](/reference/react/useDeferredValue) Hook memungkinkan Anda meneruskan versi kueri yang ditangguhkan: 
+Pola UI alternatif yang umum adalah dengan *menangguhkan* pembaruan daftar dan tetap menampilkan hasil sebelumnya hingga hasil yang baru siap. Hook [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda untuk memberikan versi yang ditangguhkan dari kueri:
 
 ```js {3,11}
 export default function App() {
@@ -1128,10 +1128,10 @@ export default function App() {
   return (
     <>
       <label>
-        Search albums:
+        Cari album:
         <input value={query} onChange={e => setQuery(e.target.value)} />
       </label>
-      <Suspense fallback={<h2>Loading...</h2>}>
+      <Suspense fallback={<h2>Memuat...</h2>}>
         <SearchResults query={deferredQuery} />
       </Suspense>
     </>
@@ -1139,9 +1139,9 @@ export default function App() {
 }
 ```
 
-`query` akan segera diperbarui, sehingga input akan menampilkan nilai baru. Namun, `deferredQuery` akan menyimpan nilai sebelumnya sampai data dimuat, jadi `SearchResults` akan menunjukkan hasil yang sebelumnya untuk sementara waktu.
+`query` akan segera diperbarui, sehingga input akan menampilkan nilai baru. Namun, `deferredQuery` akan menyimpan nilai sebelumnya sampai data dimuat, sehingga `SearchResults` akan menunjukkan hasil yang sebelumnya untuk sementara waktu.
 
-Untuk membuatnya lebih jelas bagi pengguna, Anda bisa menambahkan indikasi visual apabila daftar hasil basi ditampilkan:
+Untuk membuatnya lebih jelas bagi pengguna, Anda bisa menambahkan indikasi visual apabila daftar hasil lampau ditampilkan:
 
 ```js {2}
 <div style={{
@@ -1151,7 +1151,7 @@ Untuk membuatnya lebih jelas bagi pengguna, Anda bisa menambahkan indikasi visua
 </div>
 ```
 
-Masukkan `"a"` didalam contoh berikut ini, tunggu hingga hasilnya dimuat, lalu edit input ke `"ab"`. Perhatikan, bahwa alih-alih fallback Suspense, Anda sekarang melihat daftar hasil sebelumnya yang diredupkan sampai hasil yang baru dimuat:
+Masukkan `"a"` didalam contoh berikut ini, tunggu hingga hasilnya dimuat, lalu ubah masukan ke `"ab"`. Perhatikan, bahwa alih-alih *fallback* Suspense, Anda sekarang melihat daftar hasil sebelumnya yang diredupkan sampai hasil yang baru dimuat:
 
 
 <Sandpack>
@@ -1182,10 +1182,10 @@ export default function App() {
   return (
     <>
       <label>
-        Search albums:
+        Cari album:
         <input value={query} onChange={e => setQuery(e.target.value)} />
       </label>
-      <Suspense fallback={<h2>Loading...</h2>}>
+      <Suspense fallback={<h2>Memuat...</h2>}>
         <div style={{ opacity: isStale ? 0.5 : 1 }}>
           <SearchResults query={deferredQuery} />
         </div>
@@ -1210,7 +1210,7 @@ export default function SearchResults({ query }) {
   }
   const albums = use(fetchData(`/search?q=${query}`));
   if (albums.length === 0) {
-    return <p>No matches for <i>"{query}"</i></p>;
+    return <p>Tidak ada yang cocok dengan <i>"{query}"</i></p>;
   }
   return (
     <ul>
@@ -1350,7 +1350,7 @@ input { margin: 10px; }
 
 <Note>
 
-Baik nilai yang ditangguhkan maupun [transitions](#preventing-already-revealed-content-from-hiding) memungkinkan Anda menghindari menampilkan Suspense fallback demi indikator sebaris. Transisi menandai seluruh pembaruan sebagai tidak mendesak sehingga biasanya digunakan oleh *framework* dan pustaka router untuk navigasi. Nilai yang ditangguhkan, di sisi lain, sebagian besar berguna dalam kode aplikasi di mana Anda ingin menandai bagian dari UI sebagai tidak mendesak dan membiarkannya "tertinggal" dari UI lainnya.
+Baik nilai yang ditangguhkan maupun [transitions](#preventing-already-revealed-content-from-hiding) memungkinkan Anda menghindari menampilkan *fallback* Suspense hanya untuk indikator sebaris. Transisi menandai seluruh pembaruan sebagai tidak mendesak sehingga biasanya hal ini digunakan oleh *framework* dan *library router* untuk navigasi. Nilai yang ditangguhkan, di sisi lain, sebagian besar berguna dalam kode aplikasi di mana Anda ingin menandai bagian dari UI sebagai tidak mendesak dan membiarkannya "tertinggal" dari UI lainnya.
 
 </Note>
 
@@ -1358,7 +1358,7 @@ Baik nilai yang ditangguhkan maupun [transitions](#preventing-already-revealed-c
 
 ### Mencegah konten yang sudah terungkap agar tidak disembunyikan {/*preventing-already-revealed-content-from-hiding*/}
 
-Ketika sebuah komponen ditangguhkan, batas Suspense induk terdekat akan beralih untuk menampilkan fallback. Hal ini dapat menyebabkan pengalaman pengguna yang mengejutkan jika komponen tersebut sudah menampilkan beberapa konten. Coba tekan tombol ini:
+Ketika sebuah komponen ditangguhkan, batasan Suspense induk terdekat akan beralih untuk menampilkan *fallback*. Hal ini dapat menyebabkan pengalaman pengguna yang mengejutkan jika komponen tersebut sudah menampilkan beberapa konten. Coba tekan tombol ini:
 
 <Sandpack>
 
@@ -1430,7 +1430,7 @@ export default function Layout({ children }) {
   return (
     <div className="layout">
       <section className="header">
-        Music Browser
+        Peramban Musik
       </section>
       <main>
         {children}
@@ -1727,7 +1727,7 @@ main {
 
 </Sandpack>
 
-Saat Anda menekan tombol, `Router` komponen me-*render* `ArtistPage` sebagai gantinya `IndexPage`.Komponen di dalam `ArtistPage` tertangguhkan, sehingga batas Suspense terdekat mulai menunjukkan *fallback*. Batas Suspense terdekat berada di dekat root, sehingga seluruh tata letak situs diganti dengan `BigSpinner`.
+Saat Anda menekan tombol, komponen `Router` akan me-*render* `ArtistPage`, bukan `IndexPage`. Komponen di dalam `ArtistPage` ditangguhkan, sehingga batasan Suspense terdekat mulai menampilkan *fallback*. Batasan Suspense terdekat berada pada dekat root, sehingga seluruh tata letak situs digantikan oleh `BigSpinner`.
 
 Untuk mencegah hal ini, Anda dapat menandai pembaruan status navigasi sebagai *transition* dengan [`startTransition`:](/reference/react/startTransition)
 
@@ -1743,7 +1743,7 @@ function Router() {
   // ...
 ```
 
-Hal ini memberi tahu React bahwa transisi state tidak mendesak, dan lebih baik tetap menampilkan halaman sebelumnya daripada menyembunyikan konten yang sudah ditampilkan. Sekarang klik tombol "menunggu" sampai `Biography` dimuat:
+Dengan begitu, React diberi tahu bahwa transisi state tidak mendesak, dan lebih baik tetap menampilkan halaman sebelumnya daripada menyembunyikan konten yang sudah ditampilkan. Sekarang klik tombol "menunggu" sampai `Biography` dimuat:
 
 <Sandpack>
 
@@ -1817,7 +1817,7 @@ export default function Layout({ children }) {
   return (
     <div className="layout">
       <section className="header">
-        Music Browser
+        Peramban Musik
       </section>
       <main>
         {children}
@@ -2114,7 +2114,7 @@ main {
 
 </Sandpack>
 
-Transisi tidak menunggu *semua* konten dimuat. Ini hanya menunggu cukup lama untuk menghindari menyembunyikan konten yang sudah terungkap. Misalnya, situs web `Layout` sudah terungkap, jadi tidak baik menyembunyikannya di balik *loading spinner*. Namun, batas `Suspense` yang bersusun di sekitar `Albums` adalah hal yang baru, jadi transisinya tidak perlu ditunggu.
+Transisi tidak menunggu *semua* konten dimuat. Transisi hanya menunggu cukup lama untuk menghindari menyembunyikan konten yang sudah ditunjukkan. Misalnya, situs web `Layout` sudah ditunjukkan, jadi tidak baik menyembunyikannya di balik *loading spinner*. Namun, batasan `Suspense` yang ada di sekitar `Albums` adalah Suspense yang baru, jadi transisinya tidak perlu ditunggu.
 
 
 <Note>
@@ -2127,7 +2127,7 @@ Router yang mendukung suspense diharapkan untuk membungkus pembaruan navigasi ke
 
 ### Mengindikasikan bahwa transisi sedang terjadi {/*indicating-that-a-transition-is-happening*/}
 
-Pada contoh di atas, setelah Anda mengeklik tombol, tidak ada indikasi visual bahwa navigasi sedang berlangsung. Untuk menambahkan indikator, Anda dapat mengganti [`startTransition`](/reference/react/startTransition) dengan [`useTransition`](/reference/react/useTransition) yang akan memberimu boolean dengan nilai `isPending`. Pada contoh di bawah ini, ini digunakan untuk mengubah gaya tajuk situs web saat transisi terjadi:
+Pada contoh di atas, setelah Anda mengeklik tombol, tidak ada indikasi visual bahwa navigasi sedang berlangsung. Untuk menambahkan indikator, Anda dapat mengganti [`startTransition`](/reference/react/startTransition) dengan [`useTransition`](/reference/react/useTransition) yang akan memberi Anda nilai *boolean* `isPending`. Pada contoh di bawah ini, nilai tersebut digunakan untuk mengubah gaya *header* situs web saat transisi terjadi:
 
 <Sandpack>
 
@@ -2204,7 +2204,7 @@ export default function Layout({ children, isPending }) {
       <section className="header" style={{
         opacity: isPending ? 0.7 : 1
       }}>
-        Music Browser
+        Peramban Musik
       </section>
       <main>
         {children}
@@ -2505,25 +2505,25 @@ main {
 
 ### Menyetel ulang batas Suspense pada navigasi {/*resetting-suspense-boundaries-on-navigation*/}
 
-Selama transisi, React akan menghindari menyembunyikan konten yang sudah ditampilkan. Namun, jika Anda menavigasi ke rute dengan parameter yang berbeda, Anda mungkin ingin memberi tahu React bahwa itu adalah konten yang *berbeda*. Anda dapat mengekspresikan ini dengan sebuah `key`:
+Selama transisi, React akan menghindari menyembunyikan konten yang sudah ditunjukkan. Namun, jika Anda menavigasi ke rute dengan parameter yang berbeda, Anda mungkin ingin memberi tahu React bahwa itu adalah konten yang *berbeda*. Anda dapat mengekspresikan ini dengan sebuah `key`:
 
 ```js
 <ProfilePage key={queryParams.id} />
 ```
 
-Bayangkan Anda sedang menavigasi dalam halaman profil pengguna, dan ada sesuatu yang ditangguhkan. Jika pembaruan itu dibungkus dengan transisi, pembaruan itu tidak akan memicu kemunduran untuk konten yang sudah terlihat. Itulah perilaku yang diharapkan.
+Bayangkan Anda sedang menavigasi dalam halaman profil pengguna, dan ada sesuatu yang ditangguhkan. Jika pembaruan itu dibungkus dengan transisi, pembaruan itu tidak akan menampilkan *fallback* untuk konten yang sudah terlihat. Itulah perilaku yang diharapkan.
 
-Namun, sekarang bayangkan Anda menavigasi di antara dua profil pengguna yang berbeda. Dalam hal ini, masuk akal untuk menampilkan fallback. Sebagai contoh, timeline salah satu pengguna adalah *konten yang berbeda* dengan timeline pengguna lain. Dengan menentukan sebuah `kunci`, Anda memastikan bahwa React memperlakukan profil pengguna yang berbeda sebagai komponen yang berbeda, dan menyetel ulang batas-batas Suspense selama navigasi. Router yang terintegrasi dengan Suspense seharusnya melakukan ini secara otomatis.
+Namun, sekarang bayangkan Anda menavigasi di antara dua profil pengguna yang berbeda. Dalam hal ini, masuk akal untuk menampilkan *fallback*. Sebagai contoh, *timeline* salah satu pengguna adalah *konten yang berbeda* dengan *timeline* pengguna lain. Dengan menentukan sebuah `kunci`, Anda memastikan bahwa React memperlakukan profil pengguna yang berbeda sebagai komponen yang berbeda, dan menyetel ulang batasan-batasan Suspense selama navigasi. Router yang terintegrasi dengan Suspense seharusnya melakukan ini secara otomatis.
 
 ---
 ### Menyediakan fallback untuk kesalahan server dan konten khusus klien {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
 
-Jika Anda menggunakan salah satu dari [API perenderan server streaming](/reference/react-dom/server) (atau *framework* yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan *render* server. Sebagai gantinya, React akan menemukan komponen `<Suspense>` terdekat di atasnya dan menyertakan fallback-nya (seperti *spiner*) ke dalam HTML server yang dihasilkan. Pengguna akan melihat pemintal pada awalnya.
+Jika Anda menggunakan salah satu dari [API *streaming* untuk pe-*render*-an di server](/reference/react-dom/server) (atau *framework* yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan *render* server. Sebagai gantinya, React akan mencari komponen `<Suspense>` terdekat di atasnya dan menyertakan *fallback*-nya (seperti *spinner*) ke dalam HTML yang dihasilkan server. Pengguna akan melihat *spinner* pada awalnya.
 
 
-Pada klien, React akan mencoba me-*render* komponen yang sama lagi. Jika terjadi kesalahan pada klien juga, React akan melemparkan kesalahan dan menampilkan [ErrorBoundary terdekat.] (/reference/react/Component/Component#static-getderivedstatefromerror) Namun, jika tidak terjadi kesalahan pada klien, React tidak akan menampilkan kesalahan pada pengguna karena konten pada akhirnya berhasil ditampilkan.
+Pada klien, React akan mencoba me-*render* komponen yang sama kembali. Jika terjadi kesalahan pada klien juga, React akan melemparkan kesalahan dan menampilkan [batasan error](/reference/react/Component/Component#static-getderivedstatefromerror) terdekat. Namun, jika tidak terjadi kesalahan pada klien, React tidak akan menampilkan kesalahan pada pengguna karena konten pada akhirnya berhasil ditampilkan.
 
-Anda dapat menggunakan ini untuk mengecualikan beberapa komponen dari perenderan di server. Untuk melakukan hal ini, lemparkan kesalahan pada lingkungan server dan kemudian bungkus dengan batas `<Suspense>` untuk mengganti HTML-nya dengan fallback:
+Anda dapat menggunakan ini untuk mengecualikan beberapa komponen dari perenderan di server. Untuk melakukan hal ini, lemparkan kesalahan pada lingkungan server dan kemudian bungkus dengan batas `<Suspense>` untuk mengganti HTML-nya dengan *fallback*:
 
 ```js
 <Suspense fallback={<Loading />}>
@@ -2532,7 +2532,7 @@ Anda dapat menggunakan ini untuk mengecualikan beberapa komponen dari perenderan
 
 function Chat() {
   if (typeof window === 'undefined') {
-    throw Error('Chat should only render on the client.');
+    throw Error('Chat seharusnya hanya dirender pada klien.');
   }
   // ...
 }
@@ -2546,9 +2546,9 @@ HTML server akan menyertakan indikator pemuatan. Indikator ini akan digantikan o
 
 ### Bagaimana cara mencegah agar UI tidak diganti dengan fallback selama pembaruan? {/*preventing-unwanted-fallbacks*/}
 
-Mengganti UI yang terlihat dengan fallback menciptakan pengalaman pengguna yang mengejutkan. Hal ini dapat terjadi ketika pembaruan menyebabkan sebuah komponen ditangguhkan, dan batas Suspense terdekat sudah menampilkan konten kepada pengguna.
+Mengganti UI yang terlihat dengan *fallback* menciptakan pengalaman pengguna yang mengejutkan. Hal ini dapat terjadi ketika pembaruan menyebabkan sebuah komponen menjadi ditangguhkan, dan batasan Suspense terdekat sudah menampilkan konten kepada pengguna.
 
-Untuk mencegah hal ini terjadi, [tandai pembaruan sebagai tidak mendesak menggunakan  `startTransition`](#preventing-already-revealed-content-from-hiding). Selama transisi, React akan menunggu hingga cukup banyak data yang dimuat untuk mencegah terjadinya fallback yang tidak diinginkan:
+Untuk mencegah hal ini terjadi, [tandai pembaruan sebagai tidak mendesak dengan menggunakan  `startTransition`](#preventing-already-revealed-content-from-hiding). Selama transisi, React akan menunggu hingga cukup banyak data yang dimuat untuk mencegah terjadinya kemumculan *fallback* yang tidak diinginkan:
 
 ```js {2-3,5}
 function handleNextPageClick() {
@@ -2559,8 +2559,8 @@ function handleNextPageClick() {
 }
 ```
 
-Ini akan menghindari menyembunyikan konten yang ada. Namun, setiap batas `Suspense` yang baru di-*render* masih akan segera menampilkan fallback untuk menghindari pemblokiran UI dan membiarkan pengguna melihat konten saat tersedia.
+Hal ini akan menghindari penyembunyan konten yang ada. Namun, setiap batasan `Suspense` yang baru di-*render* masih akan segera menampilkan *fallback* untuk menghindari pemblokiran UI dan memperbolehkan pengguna melihat konten saat konten tersebut tersedia.
 
-**React hanya akan mencegah fallback yang tidak diinginkan selama pembaruan yang tidak mendesak**. Ini tidak akan menunda *render* jika itu adalah hasil dari pembaruan yang mendesak. Anda harus ikut serta dengan API seperti [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
+**React hanya akan mencegah *fallback* yang tidak diinginkan selama pembaruan yang tidak mendesak**. Ini tidak akan menunda pe-*render*-an jika hasl tersebut adalah hasil dari pembaruan yang mendesak. Anda harus memilih menggunakan API seperti [`startTransition`](/reference/react/startTransition) atau [`useDeferredValue`](/reference/react/useDeferredValue).
 
-Jika router Anda terintegrasi dengan Suspense, router akan membungkus pembaruannya menjadi [`startTransition`](/reference/react/startTransition) secara otomatis.
+Jika router Anda terintegrasi dengan Suspense, router seharusnya membungkus pembaruannya menjadi [`startTransition`](/reference/react/startTransition) secara otomatis.

From ec22cb1d36df339c7b1c4af2812ad14f21476d69 Mon Sep 17 00:00:00 2001
From: Chris Qiang <chris@christianto.net>
Date: Sat, 26 Aug 2023 18:08:27 +0700
Subject: [PATCH 17/19] fix: Finalize translations

---
 src/content/reference/react/Suspense.md | 48 ++++++++++++-------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 6a923fa36..de2f29fda 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -4,7 +4,7 @@ title: <Suspense>
 
 <Intro>
 
-`<Suspense>` memungkinkan Anda menampilkan *fallback* sampai komponen anak-anaknya selesai dimuat.
+`<Suspense>` memungkinkan Anda menampilkan *fallback* hingga komponen anak-anaknya selesai dimuat.
 
 
 ```js
@@ -36,9 +36,9 @@ title: <Suspense>
 
 ---
 
-## Pengunaan {/*usage*/}
+## Penggunaan {/*usage*/}
 
-### Menampilkan fallback saat konten sedang dimuat {/*displaying-a-fallback-while-content-is-loading*/}
+### Menampilkan *fallback* saat konten sedang dimuat {/*displaying-a-fallback-while-content-is-loading*/}
 
 Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan batasan Suspense:
 
@@ -48,9 +48,9 @@ Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan batasan Suspense
 </Suspense>
 ```
 
-React akan menampilkan <CodeStep step={1}>*fallback* pemuatan</CodeStep> sampai semua kode dan data yang dibutuhkan oleh <CodeStep step={2}>anak-anaknya</CodeStep> telah selesai dimuat.
+React akan menampilkan <CodeStep step={1}>*fallback* pemuatan</CodeStep> hingga semua kode dan data yang dibutuhkan oleh <CodeStep step={2}>anak-anaknya</CodeStep> telah selesai dimuat.
 
-Pada contoh di bawah ini, Komponen `Albums` *ditangguhkan* saat mengambil daftar album. Hingga siap untuk di-*render*, React mengganti batasan Suspense terdekat di atas untuk menunjukkan *fallback*, komponen `Loading` Anda. Kemudian, saat data termuat, React menyembunyikan *fallback* `Loading` dan me-*render* komponen `Albums` dengan data tersebut.
+Pada contoh di bawah ini, Komponen `Albums` *ditangguhkan* saat mengambil daftar album. Hingga komponen tersebut siap untuk di-*render*, React mengganti batasan Suspense terdekat di atas untuk menunjukkan *fallback*, komponen `Loading` Anda. Kemudian, saat data termuat, React menyembunyikan *fallback* `Loading` dan me-*render* komponen `Albums` dengan data tersebut.
 
 <Sandpack>
 
@@ -252,14 +252,14 @@ async function getAlbums() {
 
 **Hanya sumber data yang mendukung Suspense yang akan mengaktifkan komponen Suspense.** Sumber data tersebut antara lain:
 
-- Pengambilan data dengan kerangka kerja yang mendukung Suspense seperti [Relay] (https://relay.dev/docs/guided-tour/rendering/loading-states/) dan [Next.js] (https://nextjs.org/docs/getting-started/react-essentials)
+- Pengambilan data dengan *framework* yang mendukung Suspense seperti [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) dan [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Pe-*lazy-load*-an kode komponen dengan [`lazy`](/reference/react/lazy)
 
-Suspense **tidak** mendeteksi ketika data diambil di dalam Effect atau event handler.
+Suspense **tidak** mendeteksi ketika data diambil di dalam Effect atau *event handler*.
 
 Cara yang tepat untuk memuat data dalam komponen `Albums` di atas tergantung pada *framework* Anda. Jika Anda menggunakan *framework* yang mendukung Suspense, Anda akan menemukan detailnya dalam dokumentasi pengambilan data.
 
-Pengambilan data yang mendukung Suspense tanpa menggunakan *framework* yang mendukung belum didukung. Persyaratan untuk mengimplementasikan sumber data yang mendukung Suspense masih belum stabil dan belum terdokumentasi. API resmi untuk mengintegrasikan sumber data dengan Suspense akan dirilis pada versi React yang akan datang. 
+Pengambilan data yang mendukung Suspense tanpa menggunakan *framework* yang mendukung fitur tersebut, belum didukung. Persyaratan untuk mengimplementasikan sumber data yang mendukung Suspense masih belum stabil dan belum terdokumentasi. API resmi untuk mengintegrasikan sumber data dengan Suspense akan dirilis pada versi React yang akan datang. 
  
 </Note>
 
@@ -564,7 +564,7 @@ async function getAlbums() {
 
 </Sandpack>
 
-Komponen yang memuat data tidak harus menjadi anak langsung dari batasan Suspense. Sebagai contoh, Anda dapat memindahkan `Biografi` dan `Album` ke dalam komponen `Rincian` yang baru. Hal ini tidak akan mengubah perilakunya. `Biografi` dan `Albums` memiliki batasan Suspense induk terdekat yang sama, sehingga pemunculannya dikoordinasikan bersama-sama.
+Komponen yang memuat data tidak harus menjadi anak langsung dari batasan Suspense. Sebagai contoh, Anda dapat memindahkan `Biography` dan `Album` ke dalam komponen `Details` yang baru. Hal ini tidak akan mengubah perilakunya. `Biography` dan `Albums` memiliki batasan Suspense induk terdekat yang sama, sehingga pemunculannya dikoordinasikan bersama-sama.
 
 ```js {2,8-11}
 <Suspense fallback={<Loading />}>
@@ -585,7 +585,7 @@ function Details({ artistId }) {
 
 ---
 
-### Mengungkap konten yang tersusun saat dimuat {/*revealing-nested-content-as-it-loads*/}
+### Menunjukkan konten yang tersusun saat dimuat {/*revealing-nested-content-as-it-loads*/}
 
 Ketika sebuah komponen ditangguhkan, komponen Suspense induk terdekat akan menampilkan *fallback*. Hal ini memungkinkan Anda menyatukan beberapa komponen Suspense untuk membuat pemuatan terurut. *Fallback* setiap batasan Suspense akan terisi saat level konten berikutnya tersedia. Sebagai contoh, Anda dapat memberikan daftar album sebuah *fallback*-nya sendiri:
 
@@ -600,7 +600,7 @@ Ketika sebuah komponen ditangguhkan, komponen Suspense induk terdekat akan menam
 </Suspense>
 ```
 
-Dengan perubahan ini, menampilkan `Biography` tidak perlu "menunggu" sampai `Album` termuat.
+Dengan perubahan ini, menampilkan `Biography` tidak perlu "menunggu" hingga `Album` termuat.
 
 Urutan pemuatannya adalah sebagai berikut:
 
@@ -921,11 +921,11 @@ async function getAlbums() {
 
 Batasan Suspense memungkinkan Anda mengkoordinasikan bagian dari UI Anda yang harus selalu "muncul" bersamaan, dan bagian yang harus menampilkan lebih banyak konten secara bertahap dalam urutan status pemuatan. Anda dapat menambah, memindahkan, atau menghapus batasan-batasan Suspense di mana saja di dalam pohon tanpa mempengaruhi perilaku bagian lainnya dari aplikasi Anda.
 
-Jangan memberikan batasan Suspense pada setiap komponen. Batas suspense tidak boleh lebih detil daripada urutan pemuatan yang Anda inginkan untuk pengalman pengguna. Jika Anda bekerja dengan desainer, tanyakan kepada mereka di mana status pemuatan harus ditempatkan, kemungkinan mereka sudah memasukkannya dalam *wireframe* desain mereka.
+Jangan memberikan batasan Suspense pada setiap komponen. Batas suspense tidak boleh lebih spesifik daripada urutan pemuatan yang Anda inginkan untuk pengalman pengguna. Jika Anda bekerja dengan desainer, tanyakan kepada mereka di mana status pemuatan harus ditempatkan, mungkin mereka sudah memasukkannya dalam *wireframe* desain mereka.
 
 ---
 
-### Menampilkan konten yang sudah basi saat konten baru sedang dimuat {/*showing-stale-content-while-fresh-content-is-loading*/}
+### Menampilkan konten yang sudah usang saat konten baru sedang dimuat {/*showing-stale-content-while-fresh-content-is-loading*/}
 
 Dalam contoh ini, komponen `SearchResults` ditangguhkan saat sedang mengambil hasil pencarian. Ketik `"a"`, tunggu hasilnya, dan kemudian ubah menjadi `"ab"`. Hasil untuk `"a"` akan tergantikan oleh *fallback* pemuatan.
 
@@ -1141,7 +1141,7 @@ export default function App() {
 
 `query` akan segera diperbarui, sehingga input akan menampilkan nilai baru. Namun, `deferredQuery` akan menyimpan nilai sebelumnya sampai data dimuat, sehingga `SearchResults` akan menunjukkan hasil yang sebelumnya untuk sementara waktu.
 
-Untuk membuatnya lebih jelas bagi pengguna, Anda bisa menambahkan indikasi visual apabila daftar hasil lampau ditampilkan:
+Untuk membuatnya lebih jelas bagi pengguna, Anda bisa menambahkan indikasi visual apabila daftar hasil yang sudah usang ditampilkan:
 
 ```js {2}
 <div style={{
@@ -1151,7 +1151,7 @@ Untuk membuatnya lebih jelas bagi pengguna, Anda bisa menambahkan indikasi visua
 </div>
 ```
 
-Masukkan `"a"` didalam contoh berikut ini, tunggu hingga hasilnya dimuat, lalu ubah masukan ke `"ab"`. Perhatikan, bahwa alih-alih *fallback* Suspense, Anda sekarang melihat daftar hasil sebelumnya yang diredupkan sampai hasil yang baru dimuat:
+Masukkan `"a"` didalam contoh berikut ini, tunggu hingga hasilnya dimuat, lalu ubah masukan ke `"ab"`. Perhatikan, bahwa alih-alih menampilkan *fallback* Suspense, Anda sekarang melihat daftar hasil sebelumnya yang diredupkan sampai hasil yang baru dimuat:
 
 
 <Sandpack>
@@ -1350,13 +1350,13 @@ input { margin: 10px; }
 
 <Note>
 
-Baik nilai yang ditangguhkan maupun [transitions](#preventing-already-revealed-content-from-hiding) memungkinkan Anda menghindari menampilkan *fallback* Suspense hanya untuk indikator sebaris. Transisi menandai seluruh pembaruan sebagai tidak mendesak sehingga biasanya hal ini digunakan oleh *framework* dan *library router* untuk navigasi. Nilai yang ditangguhkan, di sisi lain, sebagian besar berguna dalam kode aplikasi di mana Anda ingin menandai bagian dari UI sebagai tidak mendesak dan membiarkannya "tertinggal" dari UI lainnya.
+Baik nilai yang ditangguhkan maupun [transisi](#preventing-already-revealed-content-from-hiding) memungkinkan Anda menghindari menampilkan *fallback* Suspense hanya untuk indikator sebaris. Transisi menandai seluruh pembaruan sebagai tidak mendesak sehingga biasanya hal ini digunakan oleh *framework* dan *library router* untuk navigasi. Nilai yang ditangguhkan, di sisi lain, sebagian besar berguna dalam kode aplikasi di mana Anda ingin menandai bagian dari UI sebagai tidak mendesak dan membiarkannya "tertinggal" dari UI lainnya.
 
 </Note>
 
 ---
 
-### Mencegah konten yang sudah terungkap agar tidak disembunyikan {/*preventing-already-revealed-content-from-hiding*/}
+### Mencegah konten yang sudah ditunjukkan agar tidak disembunyikan {/*preventing-already-revealed-content-from-hiding*/}
 
 Ketika sebuah komponen ditangguhkan, batasan Suspense induk terdekat akan beralih untuk menampilkan *fallback*. Hal ini dapat menyebabkan pengalaman pengguna yang mengejutkan jika komponen tersebut sudah menampilkan beberapa konten. Coba tekan tombol ini:
 
@@ -1727,7 +1727,7 @@ main {
 
 </Sandpack>
 
-Saat Anda menekan tombol, komponen `Router` akan me-*render* `ArtistPage`, bukan `IndexPage`. Komponen di dalam `ArtistPage` ditangguhkan, sehingga batasan Suspense terdekat mulai menampilkan *fallback*. Batasan Suspense terdekat berada pada dekat root, sehingga seluruh tata letak situs digantikan oleh `BigSpinner`.
+Saat Anda menekan tombol, komponen `Router` akan me-*render* `ArtistPage`, bukan `IndexPage`. Komponen di dalam `ArtistPage` ditangguhkan, sehingga batasan Suspense terdekat mulai menampilkan *fallback*. Batasan Suspense terdekat berada pada dekat akar, sehingga seluruh tata letak situs digantikan oleh `BigSpinner`.
 
 Untuk mencegah hal ini, Anda dapat menandai pembaruan status navigasi sebagai *transition* dengan [`startTransition`:](/reference/react/startTransition)
 
@@ -1743,7 +1743,7 @@ function Router() {
   // ...
 ```
 
-Dengan begitu, React diberi tahu bahwa transisi state tidak mendesak, dan lebih baik tetap menampilkan halaman sebelumnya daripada menyembunyikan konten yang sudah ditampilkan. Sekarang klik tombol "menunggu" sampai `Biography` dimuat:
+Dengan begitu, React diberi tahu bahwa transisi *state* tidak mendesak, dan lebih baik tetap menampilkan halaman sebelumnya daripada menyembunyikan konten yang sudah ditampilkan. Sekarang pengklikan tombol akan "menunggu" sampai `Biography` dimuat:
 
 <Sandpack>
 
@@ -2503,7 +2503,7 @@ main {
 
 ---
 
-### Menyetel ulang batas Suspense pada navigasi {/*resetting-suspense-boundaries-on-navigation*/}
+### Menyetel ulang batasan Suspense pada navigasi {/*resetting-suspense-boundaries-on-navigation*/}
 
 Selama transisi, React akan menghindari menyembunyikan konten yang sudah ditunjukkan. Namun, jika Anda menavigasi ke rute dengan parameter yang berbeda, Anda mungkin ingin memberi tahu React bahwa itu adalah konten yang *berbeda*. Anda dapat mengekspresikan ini dengan sebuah `key`:
 
@@ -2513,12 +2513,12 @@ Selama transisi, React akan menghindari menyembunyikan konten yang sudah ditunju
 
 Bayangkan Anda sedang menavigasi dalam halaman profil pengguna, dan ada sesuatu yang ditangguhkan. Jika pembaruan itu dibungkus dengan transisi, pembaruan itu tidak akan menampilkan *fallback* untuk konten yang sudah terlihat. Itulah perilaku yang diharapkan.
 
-Namun, sekarang bayangkan Anda menavigasi di antara dua profil pengguna yang berbeda. Dalam hal ini, masuk akal untuk menampilkan *fallback*. Sebagai contoh, *timeline* salah satu pengguna adalah *konten yang berbeda* dengan *timeline* pengguna lain. Dengan menentukan sebuah `kunci`, Anda memastikan bahwa React memperlakukan profil pengguna yang berbeda sebagai komponen yang berbeda, dan menyetel ulang batasan-batasan Suspense selama navigasi. Router yang terintegrasi dengan Suspense seharusnya melakukan ini secara otomatis.
+Namun, sekarang bayangkan Anda menavigasi di antara dua profil pengguna yang berbeda. Dalam kasus ini, masuk akal untuk menampilkan *fallback*. Sebagai contoh, *timeline* salah satu pengguna adalah *konten yang berbeda* dengan *timeline* pengguna lain. Dengan menentukan sebuah `kunci`, Anda memastikan bahwa React memperlakukan profil pengguna yang berbeda sebagai komponen yang berbeda, dan menyetel ulang batasan-batasan Suspense selama navigasi. Router yang terintegrasi dengan Suspense seharusnya melakukan ini secara otomatis.
 
 ---
-### Menyediakan fallback untuk kesalahan server dan konten khusus klien {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
+### Menyediakan *fallback* untuk kesalahan server dan konten khusus klien {/*providing-a-fallback-for-server-errors-and-server-only-content*/}
 
-Jika Anda menggunakan salah satu dari [API *streaming* untuk pe-*render*-an di server](/reference/react-dom/server) (atau *framework* yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan *render* server. Sebagai gantinya, React akan mencari komponen `<Suspense>` terdekat di atasnya dan menyertakan *fallback*-nya (seperti *spinner*) ke dalam HTML yang dihasilkan server. Pengguna akan melihat *spinner* pada awalnya.
+Jika Anda menggunakan salah satu dari [API *streaming* untuk pe-*render*-an di server](/reference/react-dom/server) (atau *framework* yang bergantung pada mereka), React juga akan menggunakan `<Suspense>` untuk menangani kesalahan pada server. Jika sebuah komponen menimbulkan kesalahan pada server, React tidak akan membatalkan pe-*render*an pada server. Sebagai gantinya, React akan mencari komponen `<Suspense>` terdekat di atasnya dan menyertakan *fallback*-nya (seperti *spinner*) ke dalam HTML yang dihasilkan server. Pengguna akan tetap melihat *spinner* pada awalnya.
 
 
 Pada klien, React akan mencoba me-*render* komponen yang sama kembali. Jika terjadi kesalahan pada klien juga, React akan melemparkan kesalahan dan menampilkan [batasan error](/reference/react/Component/Component#static-getderivedstatefromerror) terdekat. Namun, jika tidak terjadi kesalahan pada klien, React tidak akan menampilkan kesalahan pada pengguna karena konten pada akhirnya berhasil ditampilkan.
@@ -2544,7 +2544,7 @@ HTML server akan menyertakan indikator pemuatan. Indikator ini akan digantikan o
 
 ## Pemecahan Masalah {/*troubleshooting*/}
 
-### Bagaimana cara mencegah agar UI tidak diganti dengan fallback selama pembaruan? {/*preventing-unwanted-fallbacks*/}
+### Bagaimana cara mencegah agar UI tidak diganti dengan *fallback* selama pembaruan? {/*preventing-unwanted-fallbacks*/}
 
 Mengganti UI yang terlihat dengan *fallback* menciptakan pengalaman pengguna yang mengejutkan. Hal ini dapat terjadi ketika pembaruan menyebabkan sebuah komponen menjadi ditangguhkan, dan batasan Suspense terdekat sudah menampilkan konten kepada pengguna.
 

From 60406b7d8b4a62cee40264d3f2f855d90ede1b41 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 8 Apr 2024 09:15:58 +0700
Subject: [PATCH 18/19] Apply suggestions from code review

Co-authored-by: M Haidar Hanif <me@mhaidarhanif.com>
---
 src/content/reference/react/Suspense.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index de2f29fda..a1312951b 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -25,7 +25,7 @@ title: <Suspense>
 
 #### *Props* {/*props*/}
 * `children`: UI sebenarnya yang ingin Anda *render*. Jika `children` ditangguhkan saat di-*render*, maka Suspense akan beralih me-*render* `fallback`.
-* `fallback`: UI alternatif untuk di-*render* menggantikan UI yang sebenarnya jika belum selesai dimuat. Simpul React apapun yang valid akan diterima, meskipun dalam praktiknya, *fallback* adalah tampilan pengganti yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan *rendering*, induk terdekat dari batasan Suspense akan diaktifkan.
+* `fallback`: UI alternatif untuk di-*render* menggantikan UI yang sebenarnya jika belum selesai dimuat. Simpul React apapun yang valid akan diterima, meskipun dalam praktiknya, *fallback* adalah tampilan pengganti yang ringan, Suspense akan secara otomatis beralih ke `fallback` ketika `children` ditangguhkan, dan kembali ke `children` ketika datanya sudah siap. Jika `fallback` ditangguhkan sewaktu melakukan *rendering*, itu akan mengaktifkan batasan Suspense dari induk terdekat.
 
 #### Catatan Penting {/*caveats*/}
 
@@ -50,7 +50,7 @@ Anda dapat membungkus bagian mana pun dari aplikasi Anda dengan batasan Suspense
 
 React akan menampilkan <CodeStep step={1}>*fallback* pemuatan</CodeStep> hingga semua kode dan data yang dibutuhkan oleh <CodeStep step={2}>anak-anaknya</CodeStep> telah selesai dimuat.
 
-Pada contoh di bawah ini, Komponen `Albums` *ditangguhkan* saat mengambil daftar album. Hingga komponen tersebut siap untuk di-*render*, React mengganti batasan Suspense terdekat di atas untuk menunjukkan *fallback*, komponen `Loading` Anda. Kemudian, saat data termuat, React menyembunyikan *fallback* `Loading` dan me-*render* komponen `Albums` dengan data tersebut.
+Pada contoh di bawah ini, komponen `Albums` *ditangguhkan* saat mengambil daftar album. Hingga komponen tersebut siap untuk di-*render*, React mengganti batasan Suspense terdekat di atas untuk menunjukkan *fallback*--komponen `Loading` Anda. Kemudian, saat data termuat, React menyembunyikan *fallback* `Loading` dan me-*render* komponen `Albums` dengan data.
 
 <Sandpack>
 
@@ -185,7 +185,7 @@ async function getData(url) {
 }
 
 async function getAlbums() {
-  // Tambahkan penundaan palsu agar penantian data lebih terasa.
+  // Tambahkan penundaan palsu agar penantian data lebih jelas.
   await new Promise(resolve => {
     setTimeout(resolve, 3000);
   });
@@ -250,16 +250,16 @@ async function getAlbums() {
 
 <Note>
 
-**Hanya sumber data yang mendukung Suspense yang akan mengaktifkan komponen Suspense.** Sumber data tersebut antara lain:
+**Hanya sumber data yang mendukung Suspense yang akan mengaktifkan komponen Suspense.** Yaitu:
 
 - Pengambilan data dengan *framework* yang mendukung Suspense seperti [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) dan [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Pe-*lazy-load*-an kode komponen dengan [`lazy`](/reference/react/lazy)
+- Kode komponen *lazy-loading* dengan [`lazy`](/reference/react/lazy)
 
 Suspense **tidak** mendeteksi ketika data diambil di dalam Effect atau *event handler*.
 
 Cara yang tepat untuk memuat data dalam komponen `Albums` di atas tergantung pada *framework* Anda. Jika Anda menggunakan *framework* yang mendukung Suspense, Anda akan menemukan detailnya dalam dokumentasi pengambilan data.
 
-Pengambilan data yang mendukung Suspense tanpa menggunakan *framework* yang mendukung fitur tersebut, belum didukung. Persyaratan untuk mengimplementasikan sumber data yang mendukung Suspense masih belum stabil dan belum terdokumentasi. API resmi untuk mengintegrasikan sumber data dengan Suspense akan dirilis pada versi React yang akan datang. 
+Pengambilan data yang mendukung Suspense tanpa menggunakan *framework* dogmatis belum didukung. Persyaratan untuk mengimplementasikan sumber data yang mendukung Suspense masih belum stabil dan belum terdokumentasi. API resmi untuk mengintegrasikan sumber data dengan Suspense akan dirilis pada versi React yang akan datang.
  
 </Note>
 
@@ -282,7 +282,7 @@ Secara *default*, seluruh pohon di dalam Suspense diperlakukan sebagai satu kesa
 
 Kemudian, setelah semuanya siap untuk ditampilkan, semuanya akan muncul sekaligus.
 
-Pada contoh di bawah ini, baik `Biography` dan `Album` mengambil beberapa data. Namun, karena mereka dikelompokkan di bawah satu batasan Suspense, komponen-komponen ini akan selalu "muncul" bersamaan.
+Pada contoh di bawah ini, baik `Biography` dan `Album` mengambil beberapa data. Namun, karena mereka dikelompokkan di bawah satu batasan Suspense, komponen-komponen ini akan selalu "muncul" bersama-sama pada waktu yang sama.
 
 <Sandpack>
 

From eed444aed11355aad042d7271f8bdeea1af6a4e0 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 8 Apr 2024 09:16:35 +0700
Subject: [PATCH 19/19] Apply suggestions from code review

Co-authored-by: M Haidar Hanif <me@mhaidarhanif.com>
---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index a1312951b..57c4cb902 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -2532,7 +2532,7 @@ Anda dapat menggunakan ini untuk mengecualikan beberapa komponen dari perenderan
 
 function Chat() {
   if (typeof window === 'undefined') {
-    throw Error('Chat seharusnya hanya dirender pada klien.');
+    throw Error('Chat seharusnya hanya di-render di klien.');
   }
   // ...
 }