diff --git a/src/components/content/carousels/CoursesCarousel.js b/src/components/content/carousels/CoursesCarousel.js
index 7080989..dd8e479 100644
--- a/src/components/content/carousels/CoursesCarousel.js
+++ b/src/components/content/carousels/CoursesCarousel.js
@@ -25,22 +25,20 @@ 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) {
                     // First process the courses to be ready for display
                     const processedCourses = fetchedCourses.map(course => parseEvent(course));
-                    
+
                     // Fetch zaps for all processed courses at once
                     const allZaps = await fetchZapsForEvents(processedCourses);
                     console.log('allZaps:', allZaps);
-    
+
                     // Process zaps to associate them with their respective courses
                     const coursesWithZaps = processedCourses.map(course => {
                         const relevantZaps = allZaps.filter(zap => {
@@ -54,7 +52,7 @@ export default function CoursesCarousel() {
                             zaps: relevantZaps
                         };
                     });
-    
+
                     setProcessedCourses(coursesWithZaps);
                 } else {
                     console.log('No courses fetched or empty array returned');
@@ -62,18 +60,20 @@ export default function CoursesCarousel() {
             } catch (error) {
                 console.error('Error fetching courses:', error);
             }
-            setLoading(false);
-        };        
+        };
         fetch();
     }, [fetchCourses, fetchZapsForEvents]);
 
     return (
         <>
             <h2 className="ml-[6%] mt-4">Courses</h2>
-            <Carousel value={loading ? [{}, {}, {}] : [...processedCourses, ...processedCourses]} 
-                      numVisible={2} 
-                      itemTemplate={loading ? TemplateSkeleton : CourseTemplate}
-                      responsiveOptions={responsiveOptions} />
+            <div className={"min-h-[384px]"}>
+                <Carousel
+                    value={!processedCourses.length > 0 ? [{}, {}, {}] : [...processedCourses, ...processedCourses]}
+                    numVisible={2}
+                    itemTemplate={!processedCourses.length > 0 ? TemplateSkeleton : CourseTemplate}
+                    responsiveOptions={responsiveOptions} />
+            </div>
         </>
     );
 }
diff --git a/src/components/content/carousels/ResourcesCarousel.js b/src/components/content/carousels/ResourcesCarousel.js
index 18ae861..8d7f379 100644
--- a/src/components/content/carousels/ResourcesCarousel.js
+++ b/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} />
         </>
     );
diff --git a/src/components/content/carousels/WorkshopsCarousel.js b/src/components/content/carousels/WorkshopsCarousel.js
index 5ae3794..425bb40 100644
--- a/src/components/content/carousels/WorkshopsCarousel.js
+++ b/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} />
         </>
     );
diff --git a/src/components/zaps/ZapDisplay.js b/src/components/zaps/ZapDisplay.js
index 31b7c7a..1c2d62f 100644
--- a/src/components/zaps/ZapDisplay.js
+++ b/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} />