Получение и отображение изображений занимает 5 секунд. ⇐ Javascript

[Anonymous]

Я пытаюсь отображать изображения в специальной адаптивной галерее Imgix. Отображение изображений занимает 5 секунд.
Я использую Next.js, и вот код:

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

const sourceId: string | undefined = process.env.NEXT_PUBLIC_SOURCE_ID;
const apiKey: string | undefined = process.env.NEXT_PUBLIC_API_KEY;
const domain: string | undefined = process.env.NEXT_PUBLIC_IMGIX_DOMAIN;

interface Image {
id: string;
url: string;
alt: string;
}

const Previews: React.FC = () => {
const [images, setImages] = useState([]);

const buildURL = (imagePath: string): string => `https://${domain}/${imagePath}`;

const fetchImages = async () => {
const allImages: Image[] = [];
let cursor: string | null = null;
let hasMore: boolean = true;
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

do {
const url = new URL(`https://api.imgix.com/api/v1/sources/${sourceId}/assets`);

if (cursor) {
url.searchParams.append("page[cursor]", cursor);
}

const response = await fetch(url, {
headers: {
Authorization: `Bearer ${apiKey}`,
},
});

if (!response.ok) {
if (response.status === 429) {
console.log("Rate limit exceeded, waiting before retrying...");
await delay(1000);
continue;
} else {
throw new Error(`Failed to fetch: ${response.statusText}`);
}
}

const data = await response.json();

for (const image of data.data) {
console.log(image);
if (image.attributes.categories && image.attributes.categories.includes("insects")) {
allImages.push({ image });
continue;
}
}
console.log(allImages);
// allImages.push(...data.data);
cursor = data.meta.cursor.next;

hasMore = data.meta.cursor.hasMore;
await delay(500);
} while (hasMore);

return allImages;
};

useEffect(() => {
fetchImages().then((images) => {
console.log(images);
setImages(images);
});
}, []);

return (



{images.map((image, i) => (
[img]{buildURL(image.image.attributes.origin_path)}
fit: "crop",
fm: "webp",
}}
width={250}
height={250}
alt={image.image.attributes.alt_text}
/>
))}


);
};

Может быть, это для цикла do while? Я не знаю. Как вы можете видеть в реквизитах, я форматирую изображения в WebP (они в формате jpg). Если я получу все изображения, а не только категорию «насекомые», это займет одинаковое количество времени. Этот компонент реализован на странице большего размера.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -5-seconds