Tengo un componente de lista de países que contiene códigos telefónicos de países, nombres de países y sus banderas usando la función map() , por lo que tarda un poco en cargarse. Necesito obtener la información si la función map() terminó o sigue funcionando, luego la uso para mostrar y luego ocultar marcadores de posición. ¿Cómo podría lograr eso?
No pude encontrar soluciones adecuadas en Internet o no pude usarlas. Al igual que cuando uso Promise(all) en un React Component, he tenido dificultades para descubrir cómo debería ser la sintaxis.
Componente <CountryList /> :
// Packages I used for countries import { getCountries, getCountryCallingCode } from "react-phone-number-input" import countryNames from "react-phone-number-input/locale/en.json" import ReactCountryFlag from "react-country-flag" // The array comes from package const countries = getCountries() <CountryList> {countries.map((country) => ( <CountryItem key={country} value={country}> <ReactCountryFlag countryCode={country} svg /> <span> {countryNames[country]} <span>+{getCountryCallingCode(country)}</span> </span> </CountryItem> ))} </CountryList> Componente <CountryItemSkeleton /> :
// The package I used for skeleton placeholder import ContentLoader from "react-content-loader" <CountryItemSkeleton> <CountryItem> <ContentLoader> <rect x="0" y="0" rx="3" ry="3" width="40" height="30" /> <rect x="52" y="8" rx="7" ry="7" width="248" height="14" /> </ContentLoader> </CountryItem> <CountryItem> <ContentLoader> <rect x="0" y="0" rx="3" ry="3" width="40" height="30" /> <rect x="52" y="8" rx="7" ry="7" width="248" height="14" /> </ContentLoader> </CountryItem> <CountryItem> <ContentLoader> <rect x="0" y="0" rx="3" ry="3" width="40" height="30" /> <rect x="52" y="8" rx="7" ry="7" width="248" height="14" /> </ContentLoader> </CountryItem> </CountryItemSkeleton>Todo aquí es sincrónico, por lo que no puede esperar ni monitorear el progreso del map() .
Sin embargo, lo que puede intentar es cargar la lista de países en un enlace de efectos para que se complete después de montar su componente. En el renderizado inicial puedes usar tu componente de esqueleto
const [countries, setCountries] = useState([]); // run once on mount useEffect(() => { setCountries(getCountries()); }, []); // or even with a small delay useEffect(() => { const timer = setTimeout(setCountries, 200, getCountries()); return () => { clearTimeout(timerId); }; }, []); return countries.length === 0 ? ( <CountryItemSkeleton /> ) : ( <CountryList> {countries.map((country) => ( <CountryItem key={country} value={country}> {/* etc */} </CountryItem> ))} </CountryList> );