Как транслировать некритические данные? ⇐ Javascript

[Anonymous]

У меня есть приложение CSR со следующими определениями маршрута: < /p>

Код: Выделить всё

const router = createBrowserRouter([
{
path: '/app/',
element: ,
loader: navBarLoader,
children: [
{
path: 'placement-selection',
Component: PlacementSelection,
loader: placementSelectionLoader,
children: [
{
path: 'options',
Component: PlacementSelectionOptions,
loader: placementSelectionOptionsLoader,
children: [
{
path: 'summary',
Component: PlacementSelectionOptionsSummary,
loader: placementSelectionOptionsSummaryLoader,
},
],
},
],
},
],
},
]);
< /code>
и следующие загрузки: < /p>
export async function navBarLoader() {
console.log('called navBarLoader')
return await new Promise((res, rej) => {
setTimeout(() => res('response'), 2000)
})
}

export async function placementSelectionLoader() {
console.log('called placementSelectionLoader')
return await new Promise((res, rej) => {
setTimeout(() => res('response'), 2000)
})
}

export async function placementSelectionOptionsLoader() {
console.log('called placementSelectionOptionsLoader')
return await new Promise((res, rej) => {
setTimeout(() => res('response'), 2000)
})
}

export async function placementSelectionOptionsSummaryLoader() {
console.log('called placementSelectionOptionsSummaryLoader')
return new Promise((res, rej) => {
setTimeout(() => res('response'), 10000)
})
}

Вот как Placementelectionoptionssummary использует данные загрузчика:

Код: Выделить всё

import { Suspense } from 'react';
import './styles.css';
import { Await, useLoaderData } from 'react-router';

export default function PlacementSelectionOptionsSummary() {
const loaderData = useLoaderData();
return (



{value => Non critical value: {value}}






{' '}
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
tempor ante ligula, id aliquet ligula laoreet id. In aliquam
hendrerit mauris, at sagittis tortor efficitur non. Proin egestas
facilisis augue. Sed aliquet maximus tempus. Nullam ornare
efficitur blandit. Sed eu mattis tortor. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Aenean tempor ante ligula, id
aliquet ligula laoreet id. In aliquam hendrerit mauris, at
sagittis tortor efficitur non. Proin egestas facilisis augue. Sed
aliquet maximus tempus. Nullam ornare efficitur blandit. Sed eu
mattis tortor',





);
}

Как видите, Placementelectionoptionssummaryloader занимает 10 секунд, где все остальные занимают 2 секунды. /> Тем не менее, пользовательский интерфейс для «маршрута/приложения/размещения»/«Опции/Сводка ожидает, что все эти погрузчики» доведут «закончить» до того, как пользовательский интерфейс.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... tical-data