Fixed carousel loading state

src/components/content/carousels/CoursesCarousel.js

@@ -25,12 +25,10 @@ const responsiveOptions = [
 
 export default function CoursesCarousel() {
     const [processedCourses, setProcessedCourses] = useState([]);
-    const [loading, setLoading] = useState(true);
     const { fetchCourses, fetchZapsForEvents } = useNostr();
 
     useEffect(() => {
         const fetch = async () => {
-            setLoading(true);
             try {
                 const fetchedCourses = await fetchCourses();
                 if (fetchedCourses && fetchedCourses.length > 0) {
@@ -62,7 +60,6 @@ export default function CoursesCarousel() {
             } catch (error) {
                 console.error('Error fetching courses:', error);
             }
-            setLoading(false);
         };
         fetch();
     }, [fetchCourses, fetchZapsForEvents]);
@@ -70,10 +67,13 @@ export default function CoursesCarousel() {
     return (
         <>
             <h2 className="ml-[6%] mt-4">Courses</h2>
-            <Carousel value={loading ? [{}, {}, {}] : [...processedCourses, ...processedCourses]} 
+            <div className={"min-h-[384px]"}>
+                <Carousel
+                    value={!processedCourses.length > 0 ? [{}, {}, {}] : [...processedCourses, ...processedCourses]}
                     numVisible={2}
-                      itemTemplate={loading ? TemplateSkeleton : CourseTemplate}
+                    itemTemplate={!processedCourses.length > 0 ? TemplateSkeleton : CourseTemplate}
                     responsiveOptions={responsiveOptions} />
+            </div>
         </>
     );
 }

src/components/content/carousels/ResourcesCarousel.js

@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Carousel } from 'primereact/carousel';
-import { useRouter } from 'next/router';
 import { useNostr } from '@/hooks/useNostr';
-import { useImageProxy } from '@/hooks/useImageProxy';
 import { parseEvent } from '@/utils/nostr';
 import ResourceTemplate from '@/components/content/carousels/templates/ResourceTemplate';
 import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
@@ -27,12 +25,10 @@ const responsiveOptions = [
 
 export default function ResourcesCarousel() {
     const [processedResources, setProcessedResources] = useState([]);
-    const [loading, setLoading] = useState(true);
     const { fetchResources, fetchZapsForEvents } = useNostr();
 
     useEffect(() => {
         const fetch = async () => {
-            setLoading(true);
             try {
                 const fetchedResources = await fetchResources();
                 if (fetchedResources && fetchedResources.length > 0) {
@@ -60,7 +56,6 @@ export default function ResourcesCarousel() {
             } catch (error) {
                 console.error('Error fetching resources:', error);
             }
-            setLoading(false);
         };        
         fetch();
     }, [fetchResources, fetchZapsForEvents]); // Assuming fetchZapsForEvents is adjusted to handle resources
@@ -69,9 +64,9 @@ export default function ResourcesCarousel() {
     return (
         <>
             <h2 className="ml-[6%] mt-4">Resources</h2>
-            <Carousel value={loading ? [{}, {}, {}] : [...processedResources, ...processedResources]}
+            <Carousel value={!processedResources.length > 0 ? [{}, {}, {}] : [...processedResources, ...processedResources]}
                       numVisible={2}
-                      itemTemplate={loading ? TemplateSkeleton : ResourceTemplate}
+                      itemTemplate={!processedResources.length > 0 ? TemplateSkeleton : ResourceTemplate}
                       responsiveOptions={responsiveOptions} />
         </>
     );

src/components/content/carousels/WorkshopsCarousel.js

@@ -27,12 +27,10 @@ const responsiveOptions = [
 
 export default function WorkshopsCarousel() {
     const [processedWorkshops, setProcessedWorkshops] = useState([]);
-    const [loading, setLoading] = useState(true);
     const { fetchWorkshops, fetchZapsForEvents } = useNostr();
 
     useEffect(() => {
         const fetch = async () => {
-            setLoading(true);
             try {
                 const fetchedWorkshops = await fetchWorkshops();
                 if (fetchedWorkshops && fetchedWorkshops.length > 0) {
@@ -60,7 +58,6 @@ export default function WorkshopsCarousel() {
             } catch (error) {
                 console.error('Error fetching workshops:', error);
             }
-            setLoading(false);
         };        
         fetch();
     }, [fetchWorkshops, fetchZapsForEvents]); // Assuming fetchZapsForEvents is adjusted to handle workshops
@@ -69,9 +66,9 @@ export default function WorkshopsCarousel() {
     return (
         <>
             <h2 className="ml-[6%] mt-4">Workshops</h2>
-            <Carousel value={loading ? [{}, {}, {}] : [...processedWorkshops, ...processedWorkshops]}
+            <Carousel value={!processedWorkshops.length > 0 ? [{}, {}, {}] : [...processedWorkshops, ...processedWorkshops]}
                       numVisible={2}
-                      itemTemplate={loading ? TemplateSkeleton : WorkshopTemplate}
+                      itemTemplate={!processedWorkshops.length > 0 ? TemplateSkeleton : WorkshopTemplate}
                       responsiveOptions={responsiveOptions} />
         </>
     );

src/components/zaps/ZapDisplay.js

@@ -1,13 +1,17 @@
 import React, { useRef } from 'react';
 import { OverlayPanel } from 'primereact/overlaypanel';
 import ZapForm from './ZapForm';
+import { ProgressSpinner } from 'primereact/progressspinner';
+        
 
 const ZapDisplay = ({ zapAmount, event }) => {
     const op = useRef(null);
     return (
         <>
             <p className="text-xs cursor-pointer" onClick={(e) => op.current.toggle(e)}>
-                <i className="pi pi-bolt text-yellow-300"></i> {zapAmount}
+                <i className="pi pi-bolt text-yellow-300"></i> 
+
+                {zapAmount ? zapAmount : <ProgressSpinner />}
             </p>
             <OverlayPanel className='w-[40%] h-[40%]' ref={op}>
                 <ZapForm event={event} />