Skip to content

Commit 1e7fc43

Browse files
committed
Translated more usage of useDeferredValue
1 parent 21948f8 commit 1e7fc43

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/content/reference/react/useDeferredValue.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -517,9 +517,9 @@ input { margin: 10px; }
517517

518518
---
519519

520-
### Indicating that the content is stale {/*indicating-that-the-content-is-stale*/}
520+
### Подсветка неактуальных данных {/*indicating-that-the-content-is-stale*/}
521521

522-
In the example above, there is no indication that the result list for the latest query is still loading. This can be confusing to the user if the new results take a while to load. To make it more obvious to the user that the result list does not match the latest query, you can add a visual indication when the stale result list is displayed:
522+
В предыдущем примере в списке последних результатов никак не обозначалось, что результаты по новому запросу всё ещё загружаются. Такой интерфейс может сбить с толку, особенно если новые результаты будут загружаться долго. Решить проблему можно, добавив визуальную индикацию для случая, когда отображаемый список результатов больше не актуален и не соответствует последнему запросу:
523523

524524
```js {2}
525525
<div style={{
@@ -529,7 +529,7 @@ In the example above, there is no indication that the result list for the latest
529529
</div>
530530
```
531531

532-
With this change, as soon as you start typing, the stale result list gets slightly dimmed until the new result list loads. You can also add a CSS transition to delay dimming so that it feels gradual, like in the example below:
532+
Благодаря этим изменениям, когда вы начнёте набирать новый запрос, список старых результатов потускнеет, пока не загрузится новый список. Вы даже можете добавить анимированный переход с задержкой, чтобы визуально "устаревание" ощущалось постепенным. Например:
533533

534534
<Sandpack>
535535

@@ -559,10 +559,10 @@ export default function App() {
559559
return (
560560
<>
561561
<label>
562-
Search albums:
562+
Найти альбом:
563563
<input value={query} onChange={e => setQuery(e.target.value)} />
564564
</label>
565-
<Suspense fallback={<h2>Loading...</h2>}>
565+
<Suspense fallback={<h2>Загрузка...</h2>}>
566566
<div style={{
567567
opacity: isStale ? 0.5 : 1,
568568
transition: isStale ? 'opacity 0.2s 0.2s linear' : 'opacity 0s 0s linear'
@@ -590,7 +590,7 @@ export default function SearchResults({ query }) {
590590
}
591591
const albums = use(fetchData(`/search?q=${query}`));
592592
if (albums.length === 0) {
593-
return <p>No matches for <i>"{query}"</i></p>;
593+
return <p>По запросу <i>"{query}"</i> ничего не найдено</p>;
594594
}
595595
return (
596596
<ul>

0 commit comments

Comments
 (0)