diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js index 972fe11..c7e2379 100644 --- a/src/components/content/carousels/templates/CourseTemplate.js +++ b/src/components/content/carousels/templates/CourseTemplate.js @@ -14,7 +14,7 @@ const CourseTemplate = ({ course }) => { const { zaps, zapsLoading, zapsError, refetchZaps } = useCoursesZapsQuery({ event: course }) useEffect(() => { - if (!zaps || !zaps.length > 0) return; + if (!zaps || zapsLoading || zapsError) return; let total = 0; zaps.forEach((zap) => { @@ -29,7 +29,10 @@ const CourseTemplate = ({ course }) => { } }); setZapAmount(total); - }, [course, zaps]); + }, [course, zaps, zapsLoading, zapsError]); + + if (zapsLoading) return <div>Loading...</div>; + if (zapsError) return <div>Error: {zapsError}</div>; return ( <div diff --git a/src/components/content/carousels/templates/ResourceTemplate.js b/src/components/content/carousels/templates/ResourceTemplate.js index 92a40d6..73e05c3 100644 --- a/src/components/content/carousels/templates/ResourceTemplate.js +++ b/src/components/content/carousels/templates/ResourceTemplate.js @@ -15,7 +15,7 @@ const ResourceTemplate = ({ resource }) => { const { returnImageProxy } = useImageProxy(); useEffect(() => { - if (!zaps || !zaps.length > 0) return; + if (!zaps || zapsLoading || zapsError) return; let total = 0; zaps.forEach((zap) => { @@ -30,7 +30,10 @@ const ResourceTemplate = ({ resource }) => { } }); setZapAmount(total); - }, [resource, zaps]); + }, [resource, zaps, zapsLoading, zapsError]); + + if (zapsLoading) return <div>Loading...</div>; + if (zapsError) return <div>Error: {zapsError}</div>; return ( <div diff --git a/src/components/content/carousels/templates/WorkshopTemplate.js b/src/components/content/carousels/templates/WorkshopTemplate.js index 451b8a4..2628765 100644 --- a/src/components/content/carousels/templates/WorkshopTemplate.js +++ b/src/components/content/carousels/templates/WorkshopTemplate.js @@ -14,8 +14,8 @@ const WorkshopTemplate = ({workshop}) => { const { zaps, zapsLoading, zapsError, refetchZaps } = useWorkshopsZapsQuery({event: workshop}); useEffect(() => { - if (!zaps || !zaps.length > 0) return; - + if (!zaps || zapsLoading || zapsError) return; + let total = 0; zaps.forEach((zap) => { // If the zap matches the event or the parameterized event, then add the zap to the total @@ -29,7 +29,7 @@ const WorkshopTemplate = ({workshop}) => { } }); setZapAmount(total); - }, [zaps, workshop]); + }, [zaps, workshop, zapsLoading, zapsError]); if (zapsLoading) return <div>Loading...</div>; if (zapsError) return <div>Error: {zapsError}</div>;