How can I load several resources and show one page only when they are all ready?
Quick answer
Put the required requests in Promise.all(): it fulfills only when every promise fulfills and rejects if any input rejects. Show a loading state, render the complete page after success, and show an error state if a required request fails. Load optional enhancements separately so they can fail or arrive late without blocking the required page. [S1]
The question, the details, the next step.
I need a page that depends on a profile, a list of projects, and permissions. How do I make sure users do not see a half-loaded page?
Treat the profile, projects, and permissions as required if the page cannot work correctly without all three. Show a loading state, then wait for the required requests together. Promise.all() fulfills with results only when every input promise fulfills; if any rejects, the combined promise rejects. [S1]
That gives you a simple readiness rule: render the complete page only on success, and show an error state if a required request fails. Promise behavior does not create those UI states for you; your application must implement the loading, success, and failure displays. [S1]
Can you show the full loading, success, and failure flow? One small project summary is optional.
Here is a framework-neutral example. The load... and render... functions are placeholders for your request and UI code. The profile, projects, and permissions are required; the summary is optional and does not delay the main page.
async function showPage() {
renderLoading();
try {
const [profile, projects, permissions] = await Promise.all([
loadProfile(),
loadProjects(),
loadPermissions()
]);
renderCompletePage({ profile, projects, permissions });
loadSummary()
.then(summary => renderSummary(summary))
.catch(() => renderSummaryFallback());
} catch (error) {
renderError({
message: "The page could not be loaded.",
retry: showPage
});
}
}Call showPage() when the page should load. Implement renderLoading, renderCompletePage, and renderError in your UI. The required group must succeed before the complete page is rendered. The optional summary starts afterward: if it is slow, the main page is still available; if it fails, only its fallback is shown. Ensure the complete page does not depend on the summary being present.
What if I want the optional summary to start at the same time as the required requests?
Start the optional request separately, without awaiting it as part of the required group. Attach success and failure handlers so its outcome is handled, then render the required page when its promises fulfill:
const summaryPromise = loadSummary()
.then(summary => ({ summary }))
.catch(() => ({ summary: null }));
try {
const [profile, projects, permissions] = await Promise.all([
loadProfile(),
loadProjects(),
loadPermissions()
]);
renderCompletePage({ profile, projects, permissions });
summaryPromise.then(({ summary }) => {
if (summary !== null) renderSummary(summary);
else renderSummaryFallback();
});
} catch (error) {
renderError({ message: "The page could not be loaded.", retry: showPage });
}Here the summary has a fallback value, and its promise is not included in the required Promise.all(). Choose a fallback that makes sense for your optional panel; do not substitute missing optional data for required data.
How should I handle an error if I need to know which required request failed?
Add context to failures from each request, such as wrapping each promise so its error identifies whether the profile, projects, or permissions request failed. Use that context to choose a useful message or logging detail, while keeping the user-facing error clear and offering a retry when appropriate.
Check the three important cases: all required requests succeed; one required request fails; and required requests succeed while the optional request fails or is slow. Confirm the complete page appears only after the required data is ready, and that the optional enhancement cannot prevent it from appearing.
A practical checklist
Mark each resource required or optional based on whether the page works without it.
Show a loading state while required data is being fetched.
Use
Promise.all()when every required request must succeed before rendering the page. [S1]Provide a clear failure state and, where appropriate, a retry action.
Handle optional content separately so its failure or delay does not block required content.
Check required success, required failure, and optional failure or delay.
A few more useful answers
When should I use `Promise.allSettled()` instead?
Use it when you need the outcome of every request, including which ones succeeded and failed. It fulfills after all inputs have settled and reports each outcome. [S1]
Does `Promise.all()` give me a loading or error display?
No. It coordinates promise outcomes; your application must show loading before awaiting the requests, render on success, and handle rejection with an error state. [S1]
Should an optional request be included in the required `Promise.all()`?
Not if the page should appear without it. Handle the optional request separately and provide a suitable fallback or update its own area when it succeeds.
Sources
References used for this guide.
- [S1] Promise — JavaScript reference (Microsoft Learn) learn.microsoft.com · Checked
- [S2] Async Programming Patterns for Asynchronous MVVM Applications: Data Binding learn.microsoft.com · Checked