Как реализовать загрузку счетчиков для результатов поиска GIF, таких как Instagram? ⇐ CSS

[Anonymous]

Я работаю над функцией поиска GIF, аналогичной той, что есть в Instagram, где пользователи могут искать GIF-файлы и просматривать список результатов. Пока каждый GIF не будет полностью загружен, я хочу показывать индикатор загрузки для соответствующего GIF.
Сейчас мой код извлекает GIF-файлы с помощью API Tenor и отображает их в виде сетки. Однако у меня еще нет реализации счетчика. Моя цель — показывать счетчик для каждого GIF-файла до тех пор, пока он не будет полностью обработан, обеспечивая удобство работы с пользователем.
Ниже приведены мои текущие настройки для получения и отображения GIF-файлов. Может ли кто-нибудь подсказать мне, как эффективно реализовать это поведение?
Счетчик не обязательно должен совпадать с тем же, что и в Instagram, это может быть любой простой счетчик, идея состоит в том, чтобы показать состояние загрузки. .

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

import { Box, Group, Image, Skeleton, Stack, TextInput } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useEffect, useState } from 'react';

const GifSelectorModal = () => {
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery] = useDebouncedValue(searchQuery, 400);

const [gifs, setGifs] = useState([]);
const [isLoading, setIsLoading] = useState(true);

const searchGifs = async (query: string) => {
const response = await axios.get('https://tenor.googleapis.com/v2/search', {
params: {
q: query,
key: 'my-key',
limit: 30,
client_key: 'tribecrafter',
},
});

return response.data;
};

useEffect(() => {
if (debouncedQuery.length >= 2) {
setIsLoading(true);

const fetchGifs = async () => {
const data = await searchGifs(debouncedQuery);
setGifs(data.results);
setIsLoading(false);
};

fetchGifs();
}
}, [debouncedQuery]);

return (

 setSearchQuery(e.target.value)}
placeholder="Search GIFs"
/>

{isLoading ? (

) : (

{gifs.map((gif) => (

))}

)}

);
};

const GifCard = ({ gif }) => (
 console.log('selected gif:', gif)}
/>
);

Желаемое поведение:


Я пытался прочитать о свойстве onLoad для обработки полной загрузки изображения, но я не уверен, как его использовать в этом сценарии, поскольку у меня одновременно загружается несколько GIF-файлов. время. Я ожидал, что для каждого GIF-файла будет отображаться счетчик до тех пор, пока он не будет полностью обработан, но в настоящее время все GIF-файлы просто отображаются пустыми, пока не завершатся загрузка.


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