Your question is Optimizing JavaScript and API Calls. Take a moment with it on the right.
Talk me through your thinking if you like. When you're confident, submit your answer and I'll grade it like a real screen (7/10 or better passes).
Disney's streaming app renders a title carousel by fetching full details for a list of title ids from an internal API, and this is the code a frontend engineer wrote to load them. It looked fine in a quick local test with one title, but in the app the carousel section it powers renders completely empty almost every time.
async function loadTitleDetails(titleIds) {
const details = [];
titleIds.forEach(async function (id) {
const response = await fetch('/api/titles/' + id);
const data = await response.json();
details.push(data);
});
return details;
}
async function renderCarousel(titleIds) {
const details = await loadTitleDetails(titleIds);
details.forEach(function (title) {
renderCard(title);
});
}
What stands out to you in this code, and why does the carousel render empty almost every time? Beyond the thing that makes it flat-out broken, explain how you would optimize the API calls themselves once it's actually working, for a carousel that can show 15-20 titles at once.