Reference/react/suspense #33

nz-m · 2023-05-19T18:44:01Z

No description provided.

github-actions · 2023-05-20T16:18:47Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

nafistiham · 2023-05-20T16:19:32Z

src/content/reference/react/Suspense.md

-### Showing stale content while fresh content is loading {/*showing-stale-content-while-fresh-content-is-loading*/}
+### নতুন কন্টেন লোড হতে হতে পুরাতন কন্টেন্ট দেখানো {/*showing-stale-content-while-fresh-content-is-loading*/}
+
+


927 is an extra line. Needs removal.

Suggested change

nafistiham · 2023-05-20T16:20:08Z

src/content/reference/react/Suspense.md

@@ -1116,7 +1118,8 @@ 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: 
+একটি প্রচলিত বিকল্প UI প্যাটার্ন হলো তালিকা হালনাগাদকে *বিলম্বিত করা(defer)* এবং নতুন ফলাফল তৈরি হওয়া পর্যন্ত পূর্ববর্তী ফলাফলগুলো দেখানো।
+[`useDeferredValue`](/reference/react/useDeferredValue) হুকটি আপনাকে query করার একটি deferred ভার্সন পাঠানোর সুবিধা দেয়ঃ


merge 1121 and 1122

nafistiham · 2023-05-20T16:24:14Z

@nz-m vai, please check the number of lines added and subtracted. We are trying to keep the paragraphs aligned. I have showed 2 lines as example. There must have been more. Because you deleted 69 lines and added 81 lines. So, please check the differences and merge accordingly. Is your PR finished? We are keeping the PR as a draft as long as we are adding commits. So, if you are finished, make it ready for review and put a comment here that you are done. We won't review until then.

This is a huge page. Thanks for doing it.

nz-m · 2023-05-20T16:37:57Z

@nafistiham ২/১ টা এক্সট্রা লাইন ভুলে চলে আসছে। এগুলা ঠিক করে আরেকটা PR দিচ্ছি। আর কিছু sentence বাংলা করতে লাইন কিছুটা হয়ত বেড়ে গিয়েছে। এটার জন্য কি কোনো সমস্যা হবে?

nafistiham · 2023-05-20T17:09:43Z

আপনি আগের মার্জ হওয়া PR একটু চোখ বুলাতে পারেন। আমি যতদূর দেখেছি, সবগুলাতেই এক্সাক্ট লাইনে অনুবাদ করা গেছে।
PR দিলে আমরা একবারে রিভিউ করে দিব। তখন হয়ত বুঝব।

nz-m · 2023-05-20T17:40:01Z

@nafistiham I'm done with PR.

nafistiham

অনুবাদ সব দিক দিয়ে বেশ ভাল হয়েছে। বাংলা ইংরেজি করার দিকে কিছুটা অসংগতি দেখছি। তবে সেটাও তেমন সমস্যা না। যেগুলো রিভিউ দিলাম সবগুলাই করতে হবে এমন না। সাজেশনও রয়েছে।

আরো কিছু সাজেশন যা এখানে লিখি নাই। অনেক তৎসম শব্দ আমরা ব্যবহার না করলে আরো পাঠযোগ্য হবে। এবং এই পেইজেই সেরকম কিছু একেকবার একেকরকম উদাহরণ আছে।
যেমন, আপডেট অনেক জায়গাতেই আপডেটা আবার অনেক জায়গায় হালনাগাদ। এইটা সব কিছু আপডেট করে দিতে পারেন।
প্রদর্শন, সর্বদা এরকম পুরোনো ধরণের শব্দের জায়গায় ক্ষেত্রবিশেষে দেখানো, সবসময় এমন শব্দ ব্যবহার করা যেতে পারে।

মোট কথা আমরা নিজেরা চলতি ভাষায় কাউকে কিছু বুঝাতে গেলে যে শব্দগুলা দিয়ে প্রতিস্থাপন করে নিতাম সেগুলোই ভদ্রস্থ ভাবে এখানে লিখতে পারি। যেকোন পরিবর্তনে আপনার দ্বিমত থাকতে পারে। নিঃসংকোচে শেয়ার করবেন।

@nomandhoni-cs ভাই, এই পেইজটা দেখবেন সময় পেলে।

নিয়াজ ভাই আবারো ধন্যবাদ। বেশ বড় পেইজ।

nafistiham · 2023-05-20T18:39:27Z

src/content/reference/react/Suspense.md

+- React প্রথমবার মাউন্ট হওয়ার আগে থেমে যাওয়া রেন্ডারগুলির জন্য কোনও state সংরক্ষণ করে না। কম্পোনেন্ট লোড হলে, React থেমে যাওয়া ট্রি পুনরায় শূন্য থেকে রেন্ডার করার চেষ্টা করবে।
+- Suspense যদি ট্রির জন্য কন্টেন্ট দেখাতে থাকে, কিন্তু পরে আবার থেমে যায়, তবে `fallback` আবার দেখানো হবে যদিনা এর হালনাগাদের কারণ [`startTransition`](/reference/react/startTransition) বা [`useDeferredValue`](/reference/react/useDeferredValue) দ্বারা সৃষ্টি হয়ে থাকে।  
+- যদি React পুনরায় থেমে যাওয়ার কারণে আগে দেখানো কন্টেন্ট লুকানোর প্রয়োজন হয়, তবে এটি কন্টেন্ট ট্রির [layout Effects](/reference/react/useLayoutEffect) কে পরিষ্কার করবে। কন্টেন্ট যখন আবার দেখানোর জন্য প্রস্তুত হয়ে যায়, রিয়েক্ট আবার layout Effects চালাবে। এটি নিশ্চিত করে যে, DOM layout পরিমাপ করা ইফেক্টগুলো কন্টেন্ট লুকায়িত অবস্থায় এটা করার চেষ্টা করে না। 
+- React এ রয়েছে *Streaming Server Rendering* এবং *Selective Hydration* এর মত অন্তর্নিহিত অপটিমাইজেশন যা Suspense এর সাথে সমন্বিত। আরো জানার জন্য পড়ুন [একটি গঠনমূলক সারমর্ম](https://github.com/reactwg/react-18/discussions/37) এবং দেখুন [একটি প্রযুক্তিগত আলোচনা](https://www.youtube.com/watch?v=pj5N-Khihgc)


Suggested change

- React এ রয়েছে *Streaming Server Rendering* এবং *Selective Hydration* এর মত অন্তর্নিহিত অপটিমাইজেশন যা Suspense এর সাথে সমন্বিত। আরো জানার জন্য পড়ুন [একটি গঠনমূলক সারমর্ম](https://github.com/reactwg/react-18/discussions/37) এবং দেখুন [একটি প্রযুক্তিগত আলোচনা](https://www.youtube.com/watch?v=pj5N-Khihgc)

- React এ রয়েছে *Streaming Server Rendering* এবং *Selective Hydration* এর মত অন্তর্নিহিত অপটিমাইজেশন যা Suspense এর সাথে সমন্বিত। আরো জানার জন্য পড়ুন [একটি গঠনমূলক সারমর্ম](https://github.com/reactwg/react-18/discussions/37) এবং দেখুন [একটি টেকনিকাল আলোচনা](https://www.youtube.com/watch?v=pj5N-Khihgc)

এই জায়গায় আমার মনে হয় প্রযুক্তিগত কথাটা ঠিক মনোভাব প্রকাশ করে না।

nafistiham · 2023-05-20T18:45:49Z

src/content/reference/react/Suspense.md

@@ -562,7 +562,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.
+যে কম্পোনেন্টগুলো ডেটা লোড করে তাদেরকে Suspense boundary এর direct children হতে হবে এমনটি নয়। উদাহরণস্বরূপ, আপনি `Biography` এবং `Albums` কে একটি নতুন `Details` কম্পোনেন্টে সরিয়ে নিতে পারেন। এটা আচরণের পরিবর্তন করে না। `Biography` এবং `Albums` একই নিকটতম প্যারেন্ট Suspense boundary সংযোজিত, তাই তাদের প্রদর্শন করা একসঙ্গে সমন্বিত হয়।


Suggested change

যে কম্পোনেন্টগুলো ডেটা লোড করে তাদেরকে Suspense boundary এর direct children হতে হবে এমনটি নয়। উদাহরণস্বরূপ, আপনি `Biography` এবং `Albums` কে একটি নতুন `Details` কম্পোনেন্টে সরিয়ে নিতে পারেন। এটা আচরণের পরিবর্তন করে না। `Biography` এবং `Albums` একই নিকটতম প্যারেন্ট Suspense boundary সংযোজিত, তাই তাদের প্রদর্শন করা একসঙ্গে সমন্বিত হয়।

যে কম্পোনেন্টগুলো ডেটা লোড করে তাদেরকে Suspense boundary এর direct children হতে হবে এমনটি নয়। উদাহরণস্বরূপ, আপনি `Biography` এবং `Albums` কে একটি নতুন `Details` কম্পোনেন্টে সরিয়ে নিতে পারেন। এটা আচরণের পরিবর্তন করে না। `Biography` এবং `Albums` এর নিকটতম প্যারেন্ট Suspense boundary একই, তাই তাদের প্রকাশ এক সঙ্গে সমন্বিতভাবে হয়।

nafistiham · 2023-05-20T18:49:11Z

src/content/reference/react/Suspense.md

-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`.
+১। যদি `Biography` এখনো লোড না হয়ে থাকে, কন্টেন্ট এর সম্পূর্ণ জায়গাজুড়ে `BigSpinner` দেখানো হলো। 


এই ৪ টা লাইনে আমার মতে present tense এ লিখলে বেশি পাঠযোগ্য হবে।
যেমন BigSpinner দেখানো হচ্ছে,
প্রতিস্থাপিত হয়,
দেখানো হয়

এটা সাজেশন। এখনো ঠিক আছে।

nafistiham · 2023-05-20T18:49:57Z

src/content/reference/react/Suspense.md

@@ -916,15 +916,15 @@ 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.
+Suspense boundary এর মাধ্যমে আপনি আপনার UI এর কোন অংশগুলি সর্বদা একই সময়ে "পপ ইন" করা হবে এবং কোন অংশগুলি লোডিং state এর একটি অনুক্রমিক সিকোয়েন্সে আরো কন্টেন্ট প্রকাশ করবে তা সমন্বিত করতে পারেন। আপনি ট্রির যে কোন জায়গায় Suspense boundaries যোগ করতে পারেন, সরাতে পারেন বা মুছতে পারেন কিন্তু অ্যাপ্লিকেশনের অন্যান্য অংশের আচরণের উপর কোন প্রভাব পড়বে না। 


Suggested change

Suspense boundary এর মাধ্যমে আপনি আপনার UI এর কোন অংশগুলি সর্বদা একই সময়ে "পপ ইন" করা হবে এবং কোন অংশগুলি লোডিং state এর একটি অনুক্রমিক সিকোয়েন্সে আরো কন্টেন্ট প্রকাশ করবে তা সমন্বিত করতে পারেন। আপনি ট্রির যে কোন জায়গায় Suspense boundaries যোগ করতে পারেন, সরাতে পারেন বা মুছতে পারেন কিন্তু অ্যাপ্লিকেশনের অন্যান্য অংশের আচরণের উপর কোন প্রভাব পড়বে না।

Suspense boundary এর মাধ্যমে আপনি আপনার UI এর কোন অংশগুলি সর্বদা একই সময়ে "পপ ইন" করা হবে এবং কোন অংশগুলি লোডিং state এর একটি অনুক্রমিক সিকোয়েন্সে আরো কন্টেন্ট প্রকাশ করবে তা সমন্বিত করতে পারেন। আপনি ট্রির যে কোন জায়গায় Suspense boundaries যোগ করতে পারেন, সরাতে পারেন বা মুছতে পারেন কিন্তু অ্যাপ্লিকেশনের অন্যান্য অংশের আচরণের উপর এর কোন প্রভাব পড়বে না।

nafistiham · 2023-05-20T18:50:41Z

src/content/reference/react/Suspense.md


-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.
+প্রত্যেকটি কম্পোনেন্টের সাথে একটি করে Suspense boundary যোগ করবেন না। Suspense boundary গুলো লোডিং ক্রমের চেয়ে ক্ষুদ্র হওয়া উচিৎ নয় যা ব্যহারকারিকে দেখাবেন। যদি আপনি একজন ডিজাইনার সঙ্গে কাজ করেন, তবে তাদেরকে জিজ্ঞাসা করুন যে লোডিং state গুলো কোথায় রাখা উচিত - সম্ভবতই তারা আগেই তা তাদের ডিজাইন ওয়ায়ারফ্রেমগুলোতে অন্তর্ভুক্ত করেছেন।


Suggested change

প্রত্যেকটি কম্পোনেন্টের সাথে একটি করে Suspense boundary যোগ করবেন না। Suspense boundary গুলো লোডিং ক্রমের চেয়ে ক্ষুদ্র হওয়া উচিৎ নয় যা ব্যহারকারিকে দেখাবেন। যদি আপনি একজন ডিজাইনার সঙ্গে কাজ করেন, তবে তাদেরকে জিজ্ঞাসা করুন যে লোডিং state গুলো কোথায় রাখা উচিত - সম্ভবতই তারা আগেই তা তাদের ডিজাইন ওয়ায়ারফ্রেমগুলোতে অন্তর্ভুক্ত করেছেন।

প্রত্যেকটি কম্পোনেন্টের সাথে একটি করে Suspense boundary যোগ করবেন না। Suspense boundary গুলো লোডিং ক্রমের চেয়ে ক্ষুদ্র হওয়া উচিৎ নয় যা ব্যহারকারীকে দেখাবেন। যদি আপনি একজন ডিজাইনার সঙ্গে কাজ করেন, তবে তাদেরকে জিজ্ঞাসা করুন যে লোডিং state গুলো কোথায় রাখা উচিত--সম্ভবতঃ তারা আগেই তা তাদের ডিজাইন ওয়্যারফ্রেমে অন্তর্ভুক্ত করেছেন।

nafistiham · 2023-05-20T18:57:58Z

src/content/reference/react/Suspense.md

@@ -1347,15 +1347,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.
+Deferred values এবং [transitions](#preventing-already-revealed-content-from-hiding) উভয়ের দ্বারাই আপনি ইনলাইন ইন্ডিকেটর এর পক্ষে Suspense fallback দেখানো থেকে বিরত থাকতে পারেন। Transitions সম্পূর্ণ হালনাগাদটিকে জরুরী নয় হিসেবে ধরে নেয় তাই এগুলো সাধারণত ফ্রেমওয়ার্ক এবং রাউটার লাইব্রেরীগুলিতে নেভিগেশনের জন্য ব্যবহৃত হয়। অন্যদিকে, deferred values সাধারণত অ্যাপ্লিকেশন কোডে ব্যবহারকারী ইন্টারফেসের জন্য বেশি উপযোগী যেখানে আপনি UI এর একটি অংশকে জরুরী হিসেবে চিহ্নিত করে দিতে পারেন এবং এটিকে অন্যান্য UI এর "lag behind" হিসেবে রেখে দিতে পারেন।


Suggested change

Deferred values এবং [transitions](#preventing-already-revealed-content-from-hiding) উভয়ের দ্বারাই আপনি ইনলাইন ইন্ডিকেটর এর পক্ষে Suspense fallback দেখানো থেকে বিরত থাকতে পারেন। Transitions সম্পূর্ণ হালনাগাদটিকে জরুরী নয় হিসেবে ধরে নেয় তাই এগুলো সাধারণত ফ্রেমওয়ার্ক এবং রাউটার লাইব্রেরীগুলিতে নেভিগেশনের জন্য ব্যবহৃত হয়। অন্যদিকে, deferred values সাধারণত অ্যাপ্লিকেশন কোডে ব্যবহারকারী ইন্টারফেসের জন্য বেশি উপযোগী যেখানে আপনি UI এর একটি অংশকে জরুরী হিসেবে চিহ্নিত করে দিতে পারেন এবং এটিকে অন্যান্য UI এর "lag behind" হিসেবে রেখে দিতে পারেন।

Deferred values এবং [transitions](#preventing-already-revealed-content-from-hiding) উভয়ের দ্বারাই আপনি ইনলাইন ইন্ডিকেটর এর হিসেবে Suspense fallback দেখানো থেকে বিরত থাকতে পারেন। Transitions সম্পূর্ণ হালনাগাদটিকে জরুরী নয় হিসেবে ধরে নেয় তাই এগুলো সাধারণত ফ্রেমওয়ার্ক এবং রাউটার লাইব্রেরীগুলিতে নেভিগেশনের জন্য ব্যবহৃত হয়। অন্যদিকে, deferred values সাধারণত অ্যাপ্লিকেশন কোডে বেশি উপযোগী যেখানে আপনি UI এর একটি অংশকে কম-জরুরী হিসেবে চিহ্নিত করে দিতে পারেন এবং এটিকে অন্যান্য UI এর "পরে আসতে" দিতে পারেন।

nafistiham · 2023-05-20T18:58:11Z

src/content/reference/react/Suspense.md


 </Note>

 ---

-### Preventing already revealed content from hiding {/*preventing-already-revealed-content-from-hiding*/}
+### প্রকাশ করে ফেলা কন্টেন্টগুল লুকাতে না দেয়া {/*preventing-already-revealed-content-from-hiding*/}


Suggested change

### প্রকাশ করে ফেলা কন্টেন্টগুল লুকাতে না দেয়া {/*preventing-already-revealed-content-from-hiding*/}

### প্রকাশ করে ফেলা কন্টেন্টগুলো লুকাতে না দেয়া {/*preventing-already-revealed-content-from-hiding*/}

nafistiham · 2023-05-20T18:59:39Z

src/content/reference/react/Suspense.md


 <Note>

-Suspense-enabled routers are expected to wrap the navigation updates into transitions by default.
+Suspense-enabled রাউটার থেকে এটা আশা করা যায় যে এগুলো স্বাভাবিকভাবেই navigation আপডেটগুলোকে ট্রান্সিশনের মধ্যে রেখে দেবে।


Suggested change

Suspense-enabled রাউটার থেকে এটা আশা করা যায় যে এগুলো স্বাভাবিকভাবেই navigation আপডেটগুলোকে ট্রান্সিশনের মধ্যে রেখে দেবে।

Suspense-enabled রাউটার থেকে এটা আশা করা যায় যে এগুলো স্বাভাবিকভাবেই নেভিগেশন আপডেটগুলোকে ট্রান্সিশনের মধ্যে রেখে দেবে।

পেইজের অন্যান্য জায়গায় বাংলা উচ্চারণে লেখা যেহেতু।

nafistiham · 2023-05-20T19:00:25Z

src/content/reference/react/Suspense.md


-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:
+উপরের উদাহরনটিতে, আপনি যদি একবার বাটনটিতে ক্লিক করেন দেখবেন কোনো দৃশ্যমান ইন্ডিকেশন নেই যে একটি নেভিগেশনের অগ্রগতি হচ্ছে। একটি ইন্ডিকেটর যোগ করতে আপনি [`startTransition`](/reference/react/startTransition) এর স্থানে [`useTransition`](/reference/react/useTransition) ব্যবহার করতে পারেন যা আপনাকে একটি boolean মান `isPending` দেয়। নিচের উদাহরণে ওয়েবসাইটের হেডার স্টাইল পরিবর্তন করার সময় একটি ট্রান্সিশন ঘটছে তা দেখানোর জন্য এটি ব্যবহার করা হয়েছেঃ


Suggested change

উপরের উদাহরনটিতে, আপনি যদি একবার বাটনটিতে ক্লিক করেন দেখবেন কোনো দৃশ্যমান ইন্ডিকেশন নেই যে একটি নেভিগেশনের অগ্রগতি হচ্ছে। একটি ইন্ডিকেটর যোগ করতে আপনি [`startTransition`](/reference/react/startTransition) এর স্থানে [`useTransition`](/reference/react/useTransition) ব্যবহার করতে পারেন যা আপনাকে একটি boolean মান `isPending` দেয়। নিচের উদাহরণে ওয়েবসাইটের হেডার স্টাইল পরিবর্তন করার সময় একটি ট্রান্সিশন ঘটছে তা দেখানোর জন্য এটি ব্যবহার করা হয়েছেঃ

উপরের উদাহরণটিতে, আপনি যদি একবার বাটনটিতে ক্লিক করেন দেখবেন কোনো দৃশ্যমান ইংগিত নেই যে একটি নেভিগেশনের অগ্রগতি হচ্ছে। একটি ইন্ডিকেটর যোগ করতে আপনি [`startTransition`](/reference/react/startTransition) এর স্থানে [`useTransition`](/reference/react/useTransition) ব্যবহার করতে পারেন যা আপনাকে একটি boolean মান `isPending` দেয়। নিচের উদাহরণে ওয়েবসাইটের হেডার স্টাইল পরিবর্তন করার সময় একটি ট্রান্সিশন ঘটছে তা দেখানোর জন্য এটি ব্যবহার করা হয়েছেঃ

nafistiham · 2023-05-20T19:02:40Z

src/content/reference/react/Suspense.md


-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.
+React ক্লায়েন্টে একই আবার কম্পোনেন্টটি রেন্ডার করার চেষ্টা করবে। যদি ক্লায়েন্টেও এরর হয়, React এররটি থ্রো করবে এবং নিকটতম [error boundary](/reference/react/Component#static-getderivedstatefromerror) টি প্রদর্শন করবে। তবে, যদি ক্লায়েন্টে এরর না হয়, React এরর টি ক্লায়েন্টে দেখাবে না যেহেতু কন্টেন্টটি শেষ পর্যন্ত সফলভাবে প্রদর্শিত হয়েছিল।


Suggested change

React ক্লায়েন্টে একই আবার কম্পোনেন্টটি রেন্ডার করার চেষ্টা করবে। যদি ক্লায়েন্টেও এরর হয়, React এররটি থ্রো করবে এবং নিকটতম [error boundary](/reference/react/Component#static-getderivedstatefromerror) টি প্রদর্শন করবে। তবে, যদি ক্লায়েন্টে এরর না হয়, React এরর টি ক্লায়েন্টে দেখাবে না যেহেতু কন্টেন্টটি শেষ পর্যন্ত সফলভাবে প্রদর্শিত হয়েছিল।

ক্লায়েন্টে, একই কম্পোনেন্টটি Reactআবার রেন্ডার করার চেষ্টা করবে। যদি ক্লায়েন্টেও এরর হয়, React এররটি থ্রো করবে এবং নিকটতম [error boundary](/reference/react/Component#static-getderivedstatefromerror) টি প্রদর্শন করবে। তবে, যদি ক্লায়েন্টে এরর না হয়, React এরর টি ক্লায়েন্টে দেখাবে না যেহেতু কন্টেন্টটি শেষ পর্যন্ত সফলভাবে প্রদর্শিত হয়েছিল।

nz-m · 2023-05-20T20:51:22Z

@nafistiham updated according to your suggestions.

nafistiham

Nice work! LGTM.

nz-m added 3 commits May 19, 2023 19:48

Translate: reference- <Suspense>

6ca8c14

Translate: reference- <Suspense> second update

8f3dbbf

Translate: Complete referece/Suspense

abaf62f

vercel bot deployed to Preview May 20, 2023 09:12 View deployment

nafistiham reviewed May 20, 2023

View reviewed changes

Translate: referece/Suspense- fix line issue

f31039f

vercel bot deployed to Preview May 20, 2023 17:36 View deployment

nafistiham requested changes May 20, 2023

View reviewed changes

Translate: referece/Suspense- update words & typo fixes

d0d6454

vercel bot deployed to Preview May 20, 2023 20:49 View deployment

nz-m requested a review from nafistiham May 20, 2023 21:49

nafistiham approved these changes May 21, 2023

View reviewed changes

nafistiham added this pull request to the merge queue May 21, 2023

Merged via the queue into reactjs:main with commit 97468dd May 21, 2023
3 checks passed

nafistiham mentioned this pull request May 21, 2023

Bengali Translation Progress #1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reference/react/suspense #33

Reference/react/suspense #33

nz-m commented May 19, 2023

github-actions bot commented May 20, 2023 •

edited

📦 Next.js Bundle Analysis for react-dev

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham commented May 20, 2023

nz-m commented May 20, 2023

nafistiham commented May 20, 2023

nz-m commented May 20, 2023

nafistiham left a comment

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nafistiham May 20, 2023

nz-m commented May 20, 2023

nafistiham left a comment

		### Showing stale content while fresh content is loading {/showing-stale-content-while-fresh-content-is-loading/}
		### নতুন কন্টেন লোড হতে হতে পুরাতন কন্টেন্ট দেখানো {/showing-stale-content-while-fresh-content-is-loading/}


		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.
		প্রত্যেকটি কম্পোনেন্টের সাথে একটি করে Suspense boundary যোগ করবেন না। Suspense boundary গুলো লোডিং ক্রমের চেয়ে ক্ষুদ্র হওয়া উচিৎ নয় যা ব্যহারকারিকে দেখাবেন। যদি আপনি একজন ডিজাইনার সঙ্গে কাজ করেন, তবে তাদেরকে জিজ্ঞাসা করুন যে লোডিং state গুলো কোথায় রাখা উচিত - সম্ভবতই তারা আগেই তা তাদের ডিজাইন ওয়ায়ারফ্রেমগুলোতে অন্তর্ভুক্ত করেছেন।

	### প্রকাশ করে ফেলা কন্টেন্টগুল লুকাতে না দেয়া {/preventing-already-revealed-content-from-hiding/}
	### প্রকাশ করে ফেলা কন্টেন্টগুলো লুকাতে না দেয়া {/preventing-already-revealed-content-from-hiding/}

	Suspense-enabled রাউটার থেকে এটা আশা করা যায় যে এগুলো স্বাভাবিকভাবেই navigation আপডেটগুলোকে ট্রান্সিশনের মধ্যে রেখে দেবে।
	Suspense-enabled রাউটার থেকে এটা আশা করা যায় যে এগুলো স্বাভাবিকভাবেই নেভিগেশন আপডেটগুলোকে ট্রান্সিশনের মধ্যে রেখে দেবে।


		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:
		উপরের উদাহরনটিতে, আপনি যদি একবার বাটনটিতে ক্লিক করেন দেখবেন কোনো দৃশ্যমান ইন্ডিকেশন নেই যে একটি নেভিগেশনের অগ্রগতি হচ্ছে। একটি ইন্ডিকেটর যোগ করতে আপনি [`startTransition`](/reference/react/startTransition) এর স্থানে [`useTransition`](/reference/react/useTransition) ব্যবহার করতে পারেন যা আপনাকে একটি boolean মান `isPending` দেয়। নিচের উদাহরণে ওয়েবসাইটের হেডার স্টাইল পরিবর্তন করার সময় একটি ট্রান্সিশন ঘটছে তা দেখানোর জন্য এটি ব্যবহার করা হয়েছেঃ


		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.
		React ক্লায়েন্টে একই আবার কম্পোনেন্টটি রেন্ডার করার চেষ্টা করবে। যদি ক্লায়েন্টেও এরর হয়, React এররটি থ্রো করবে এবং নিকটতম [error boundary](/reference/react/Component#static-getderivedstatefromerror) টি প্রদর্শন করবে। তবে, যদি ক্লায়েন্টে এরর না হয়, React এরর টি ক্লায়েন্টে দেখাবে না যেহেতু কন্টেন্টটি শেষ পর্যন্ত সফলভাবে প্রদর্শিত হয়েছিল।

Reference/react/suspense #33

Reference/react/suspense #33

Conversation

nz-m commented May 19, 2023

github-actions bot commented May 20, 2023 • edited

Size changes

📦 Next.js Bundle Analysis for react-dev

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nafistiham commented May 20, 2023

nz-m commented May 20, 2023

nafistiham commented May 20, 2023

nz-m commented May 20, 2023

nafistiham left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nz-m commented May 20, 2023

nafistiham left a comment

Choose a reason for hiding this comment

github-actions bot commented May 20, 2023 •

edited