-
Notifications
You must be signed in to change notification settings - Fork 125
Finished translation of Suspense page #556
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
Thanks for the PR! I'll do a review a little bit later, as there are already another two big PRs submitted earlier which are waiting for the review. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Перша частина перевірки
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Друга частина перевірки: усі ці та попередні зауваження мають бути виправлені у всьому PR.
Третя частина перевірки буде після злиття #564 і виправлень першої і другої частини перевірки цього PR - інакше у мене накладається складність коректури одного і того самого
926ffa8
to
bd5f734
Compare
Дякую за рев'ю.
|
bd5f734
to
2b508a2
Compare
@GeorgeShvab можеш ребейзнути? |
2b508a2
to
2ac4731
Compare
@alinkedd ребейзнув |
</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 паттерном є *відкладене* оновлення списку з показом попередніх результатів, доки нові результати не будуть готові. Хук [`useDeferredValue`](/reference/react/useDeferredValue) дає змогу передавати відкладений варіант запиту вниз по дереву: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Поширеним альтернативним UI паттерном є *відкладене* оновлення списку з показом попередніх результатів, доки нові результати не будуть готові. Хук [`useDeferredValue`](/reference/react/useDeferredValue) дає змогу передавати відкладений варіант запиту вниз по дереву: | |
Поширеним альтернативним UI паттерном є *відкладене* оновлення списку з показом попередніх результатів, доки нові результати не будуть готові. Хук [`useDeferredValue`](/reference/react/useDeferredValue) дає змогу передавати відкладений варіант запиту вниз деревом: |
``` | ||
|
||
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` оновиться одразу, тому пошуковий рядок відображатиме нове значення. Проте, `deferredQuery` збереже попереднє значення, доки дані не будуть завантажені, тож `SearchResults` на деякий час відобразить застарілі результати. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`query` оновиться одразу, тому пошуковий рядок відображатиме нове значення. Проте, `deferredQuery` збереже попереднє значення, доки дані не будуть завантажені, тож `SearchResults` на деякий час відобразить застарілі результати. | |
`query` оновиться одразу, тому поле пошуку відображатиме нове значення. Проте `deferredQuery` збереже попереднє значення, доки дані не будуть завантажені, тож `SearchResults` на деякий час відобразить застарілі результати. |
``` | ||
|
||
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: | ||
Введіть `"a"` у прикладі нижче, зачекайте на результат, тоді змініть значення на `"ab"`. Зверніть увагу, як замість запасного варіанту, ви бачите затемнений список попередніх результатів, доки нові результати не завантажилися: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Введіть `"a"` у прикладі нижче, зачекайте на результат, тоді змініть значення на `"ab"`. Зверніть увагу, як замість запасного варіанту, ви бачите затемнений список попередніх результатів, доки нові результати не завантажилися: | |
Введіть `"a"` у прикладі нижче, зачекайте на результат, тоді змініть значення на `"ab"`. Зверніть увагу, як замість запасного варіанту ви бачите затемнений список попередніх результатів, доки нові результати не завантажилися: |
<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. | ||
Як затримані значення так і [переходи](#preventing-already-revealed-content-from-hiding) дають вам змогу уникнути відображення запасного варіанту Suspense, натомість відображаючи індикатор безпосередньо у вмісті. Переходи відмічають оновлення як нетермінові, тож вони часто використовуються фреймворками та бібліотеками-маршрутизаторами для навігації. З іншого боку, відкладені значення, переважно використовуються в коді застосунку там, де ви хочете відмітити частину UI як нетермінову й дозволити їй "відставати" від решти UI. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Як затримані значення так і [переходи](#preventing-already-revealed-content-from-hiding) дають вам змогу уникнути відображення запасного варіанту Suspense, натомість відображаючи індикатор безпосередньо у вмісті. Переходи відмічають оновлення як нетермінові, тож вони часто використовуються фреймворками та бібліотеками-маршрутизаторами для навігації. З іншого боку, відкладені значення, переважно використовуються в коді застосунку там, де ви хочете відмітити частину UI як нетермінову й дозволити їй "відставати" від решти UI. | |
Як відкладені значення, так і [переходи (transitions)](#preventing-already-revealed-content-from-hiding) дають вам змогу уникнути відображення запасного варіанту Suspense, натомість відображаючи індикатор безпосередньо у вмісті. Переходи позначають оновлення як нетермінові, тож вони часто використовуються фреймворками та бібліотеками-маршрутизаторами для навігації. З іншого боку, відкладені значення переважно використовуються в коді застосунку там, де ви хочете позаначити частину UI як нетермінову й дозволити їй "відставати" від решти UI. |
### Запобігання заміни запасним варіантом уже відображеного вмісту {/*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: | ||
Коли компонент затримується, найближча батьківська межа Suspense перемикається на показ запасного варіанту. Це може призвести до неприємного користувацького досвіду у випадку, якщо якийсь вміст уже відображався. Спробуйте настинути цю кнопку: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Коли компонент затримується, найближча батьківська межа Suspense перемикається на показ запасного варіанту. Це може призвести до неприємного користувацького досвіду у випадку, якщо якийсь вміст уже відображався. Спробуйте настинути цю кнопку: | |
Коли компонент затримується, найближча батьківська межа Suspense перемикається на показ запасного варіанту. Це може призвести до неприємного користувацького досвіду у разі, якщо якийсь вміст уже відображався. Спробуйте настинути цю кнопку: |
https://onlinecorrector.com.ua/%D1%83-%D1%80%D0%B0%D0%B7%D1%96/
``` | ||
The server HTML will include the loading indicator. It will be replaced by the `Chat` component on the client. | ||
Відрендерений на стороні сервера HTML включатиме лише індикатор завантаження. Його буде замінено компонентом `Chat` на стороні клієнта. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Відрендерений на стороні сервера HTML включатиме лише індикатор завантаження. Його буде замінено компонентом `Chat` на стороні клієнта. | |
Серверний HTML-код матиме лише індикатор завантаження. Його буде замінено компонентом `Chat` на клієнті. |
--- | ||
## Troubleshooting {/*troubleshooting*/} | ||
## Усунення неполадок {/*troubleshooting*/} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## Усунення неполадок {/*troubleshooting*/} | |
## Усунення проблем {/*troubleshooting*/} |
Заміна видимого UI запасним варіантом спричиняє неприємний користувацький досвід. Це стається, коли оновлення спричиняє затримку компонента, а найближчий Suspense вже показує вміст користувачу. | ||
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: | ||
Щоб запобігти цьому, [відмітьте оновлення нетерміновим, використовуючи `startTransition`](#preventing-already-revealed-content-from-hiding). Під час переходу, React зачекає на завантаження даних, щоб запобігти відображенню небажаного запасного варіанту: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Щоб запобігти цьому, [відмітьте оновлення нетерміновим, використовуючи `startTransition`](#preventing-already-revealed-content-from-hiding). Під час переходу, React зачекає на завантаження даних, щоб запобігти відображенню небажаного запасного варіанту: | |
Щоб запобігти цьому, [позначте оновлення нетерміновим за допомогою `startTransition`](#preventing-already-revealed-content-from-hiding). Під час переходу React зачекає на завантаження даних, щоб запобігти відображенню небажаного запасного варіанту: |
``` | ||
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. | ||
Це допоможе уникнути приховання вже існуючого вмісту. Однак, будь-яка наново відрендерена межа `Suspense`, усе ще відображатиме запасний варіант, щоб уникнути блокування UI і дасть змогу користувачу бачити вміст як тільки він стане доступним. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Це допоможе уникнути приховання вже існуючого вмісту. Однак, будь-яка наново відрендерена межа `Suspense`, усе ще відображатиме запасний варіант, щоб уникнути блокування UI і дасть змогу користувачу бачити вміст як тільки він стане доступним. | |
Так ви уникнете приховання наявного вмісту. Однак, будь-яка наново відрендерена межа `Suspense` усе ще відображатиме запасний варіант, щоб уникнути блокування UI, і дасть змогу користувачу бачити вміст, щойно він стане доступним. |
https://onlinecorrector.com.ua/%D1%89%D0%BE%D0%B9%D0%BD%D0%BE/
Це допоможе уникнути приховання вже існуючого вмісту. Однак, будь-яка наново відрендерена межа `Suspense`, усе ще відображатиме запасний варіант, щоб уникнути блокування UI і дасть змогу користувачу бачити вміст як тільки він стане доступним. | ||
**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 запобігатиме небажаним запасним варіантам лише під час нетермінових оновлень**. Він не затримуватиме рендеринг, якщо це результат термінового оновлення. Ви повинні увімкнути це з API, наприклад, [`startTransition`](/reference/react/startTransition) або [`useDeferredValue`](/reference/react/useDeferredValue). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
**React запобігатиме небажаним запасним варіантам лише під час нетермінових оновлень**. Він не затримуватиме рендеринг, якщо це результат термінового оновлення. Ви повинні увімкнути це з API, наприклад, [`startTransition`](/reference/react/startTransition) або [`useDeferredValue`](/reference/react/useDeferredValue). | |
**React запобігатиме небажаним запасним варіантам лише під час нетермінових оновлень**. Він не затримуватиме рендеринг, якщо це результат термінового оновлення. Щоб увімкнути запобігання, ви повинні використовувати певні API, наприклад, [`startTransition`](/reference/react/startTransition) або [`useDeferredValue`](/reference/react/useDeferredValue). |
переписала, щоб було зрозуміліше, шо третє речення посилається на перше
Apologies for the long time this translation has taken.
Translated "fallback" as "запасний варіант" according to the glossary. I considered other variants but couldn't find a more suitable option.