React - How to show skeleton placeholders until Array map function ended-CodePudding

I have a country list component that contains country phone codes, country names and their flags using map() function so it takes a bit long to load. I need to get the information if map() function ended or still working then use it for showing then hiding placeholders. How could I achieve that?

I couldn't find proper solutions on Internet or couldn't use them. Like when using Promise(all) in a React Component, I've been having hardness to figure out how syntax should be.

<CountryList /> component:

// 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>

<CountryItemSkeleton /> component:

// 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>

CodePudding user response：

Everything here is synchronous so you cannot wait for or monitor the map() progress.

What you can try though is loading the country list in an effect hook so that it's populated after your component is mounted. On the initial render you can use your skeleton component

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>
);