How to use the reduxful.isLoaded function in reduxful

const BlackPopulationChange = ({ init, data, Layout }) => {
  useEffect(() => {
    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loading =
    !isLoaded(data.ncdbYearly1990) || !isLoaded(data.ncdbYearly2017);

  return (
    
  );
};

const TemplateAPICard = ({ init, data, Layout }) => {
  useEffect(() => {
    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loading = !isLoaded(data.ridershipOverTime);

  return (
    
  );
};

const SystemWideSummaryMeta = data => ({
  title: "System Wide Summary",
  slug: "system-wide-summary",
  introText: (
    <p>
      {isLoaded(data.busSystemWideSummary)
        ? `This chart is generated from ${data.busSystemWideSummary.value.results
            .reduce((acc, result) =&gt; acc + result.total_ons, 0)
            .toLocaleString()} total onboarding events and ${data.busSystemWideSummary.value.results
            .reduce((acc, result) =&gt; acc + result.total_offs, 0)
            .toLocaleString()} total offboarding events. Morning and evening rush hour peaks are defined as an hour before and after their respective peaks with a.m rush being 6:30 a.m to 9 a.m. and p.m. rush being 2:30 p.m. to 6:45 p.m. Identifying these peak hours gives us the ability to focus on local and system-wide trends that affect the most people.`
        : null}
    </p>
  ),
  visualization: SystemWideSummaryVisualization, // data, isLoading are passed to this as props
  additionalText: <p>,
  shareText: "",
  tags: ["Transportation", "Bus", "Portland", "Oregon"],
  selector: null,
  analysis: (
    
      </p>

const HolcRedliningVisualization = ({ data }) => {
  if (!isLoaded(data.redliningMap)) return ;

  const polygonFieldName = "holc_grade";
  const redliningMap = data.redliningMap.value.results.features;
  const colorScale = scaleOrdinal()
    .domain(["A", "B", "C", "D"])
    .range([
      // Color-blind safe diverging color scale from ColorBrewer
      [77, 175, 74],
      [30, 98, 189],
      [255, 178, 31],
      [220, 69, 86]
    ]);

  const REDLINING_GRADES = {
    A: '"Best"',
    B: '"Still Desirable"',

const HomeLoanApprovals = ({ init, data, Layout }) => {
  useEffect(() => {
    init();
  }, [init]);

  const loading = !isLoaded(data.totalLoans);

  return (
    
  );
};

const HomeAppreciationVisualization = ({ data }) => {
  const [threshold, setThreshold] = useState(200000);

  if (
    !data ||
    !isLoaded(data.annualHomeAppreciation) ||
    !isLoaded(data.homeownershipByRace) ||
    !isLoaded(data.homeInflationData)
  ) {
    return ;
  }

  const lineChartData = data.annualHomeAppreciation.value.results.map(
    yearData => ({
      value: yearData.adj_appreciation_med,
      sale_year: yearData.sale_year
    })
  );
  const areaChartData = data.annualHomeAppreciation.value.results.flatMap(
    yearData => ({
      y0: yearData.adj_appreciation_75th,
      y: yearData.adj_appreciation_25th,

const HomeAppreciationVisualization = ({ data }) => {
  const [threshold, setThreshold] = useState(200000);

  if (
    !data ||
    !isLoaded(data.annualHomeAppreciation) ||
    !isLoaded(data.homeownershipByRace) ||
    !isLoaded(data.homeInflationData)
  ) {
    return ;
  }

  const lineChartData = data.annualHomeAppreciation.value.results.map(
    yearData => ({
      value: yearData.adj_appreciation_med,
      sale_year: yearData.sale_year
    })
  );
  const areaChartData = data.annualHomeAppreciation.value.results.flatMap(
    yearData => ({
      y0: yearData.adj_appreciation_75th,
      y: yearData.adj_appreciation_25th,
      x: yearData.sale_year
    })

const AduDistributionsVisualization = ({ data }) => {
  if (!isLoaded(data.residentialBuildingPermit)) {
    return <div>Data Loading...</div>;
  }

  const pointGeoJsonData = data.residentialBuildingPermit.value.results;
  const test = {
    type: "FeatureCollection",
    features: pointGeoJsonData.map(el =&gt; ({
      id: el.index,
      type: "Feature",
      properties: el,
      geometry: {
        type: "Point",
        coordinates: [el.x, el.y]
      }
    }))
  };

const EarthquakeDamageEstimatesForBuildingsInTillamookCountyVisualization = ({
  data
}) => {
  const hasLoaded = isLoaded(data.damageEstimates);
  const [dataType, setData] = useState("Commercial");

  const mapStyles = {
    Commercial: {
      field: "ComLossRatio",
      opacity: 0.5,
      map: "light",
      buildingType: "commercial"
    },
    Residential: {
      field: "ResLossRatio",
      opacity: 0.5,
      map: "light",
      buildingType: "residential"
    }
  };

const TillamookCountyEarthquakeCasualtyEstimatesVisualization = ({ data }) => {
  const hasLoaded = isLoaded(data.earthquakeCasualties);
  const [dataType, setData] = useState("Nighttime - Injuries");

  const mapStyles = {
    "Daytime - Injuries": {
      field: "DaytimeInjuries",
      color: VisualizationColors.categorical.yellow.mapFormatRGBA,
      opacity: 0.1,
      map: "light",
      timeOfDay: "daytime",
      impact: "injuries"
    },
    "Daytime - Casualties": {
      field: "DaytimeDeaths",
      color: VisualizationColors.categorical.pink.mapFormatRGBA,
      opacity: 0.3,
      map: "light",