Improvements to zaps zap loading and spinner styles

src/components/zaps/ZapDisplay.js

@@ -1,19 +1,32 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import { OverlayPanel } from 'primereact/overlaypanel';
 import ZapForm from './ZapForm';
 import { ProgressSpinner } from 'primereact/progressspinner';
 
 const ZapDisplay = ({ zapAmount, event, zapsLoading }) => {
     const op = useRef(null);
+    const [extraLoading, setExtraLoading] = useState(false);
+
+    useMemo(() => {
+        let timeout;
+        if (!zapsLoading && zapAmount === 0) {
+            setExtraLoading(true);
+            timeout = setTimeout(() => setExtraLoading(false), 5000);
+        }
+        return () => clearTimeout(timeout);
+    }, [zapsLoading, zapAmount]);
+
     return (
         <>
-            <span className="text-xs cursor-pointer flex items-center" onClick={(e) => op.current.toggle(e)}>
+            <span className="text-xs cursor-pointer flex items-center relative shadow-md cursor-pointer hover:opacity-80" onClick={(e) => op.current.toggle(e)}>
                 <i className="pi pi-bolt text-yellow-300"></i>
-                {zapsLoading ? (
+                <span className="relative flex items-center min-w-[20px] min-h-[20px]">
-                    <ProgressSpinner style={{width: '20px', height: '20px'}} strokeWidth="8" animationDuration=".5s" />
+                    {zapsLoading || zapAmount === null || extraLoading ? (
-                ) : (
+                        <ProgressSpinner className="absolute top-0 left-0 w-[20px] h-[20px]" strokeWidth="8" animationDuration=".5s" />
-                    zapAmount !== null ? zapAmount : <ProgressSpinner style={{width: '20px', height: '20px'}} strokeWidth="8" animationDuration=".5s" />
+                    ) : (
-                )}
+                        zapAmount
+                    )}
+                </span>
             </span>
             <OverlayPanel className='w-[40%] h-[40%]' ref={op}>
                 <ZapForm event={event} />

src/components/zaps/ZapForm.js

@@ -1,13 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { nip19 } from "nostr-tools";
 
 const ZapForm = ({ event }) => {
-    console.log('event', event);
     const nAddress = nip19.naddrEncode({
         kind: event?.kind,
         pubkey: event?.pubkey,
         identifier: event.d,
-    })
+    });
 
     return (
         <iframe
@@ -21,54 +20,3 @@ const ZapForm = ({ event }) => {
 };
 
 export default ZapForm;
-
-
-// import React, { useState } from "react";
-// import { Button } from 'primereact/button';
-// import { InputText } from 'primereact/inputtext';
-// import { InputTextarea } from 'primereact/inputtextarea';
-// import { useNostr } from "@/hooks/useNostr";
-
-// const ZapForm = ({event}) => {
-//     const [zapAmount, setZapAmount] = useState(0);
-//     const [comment, setComment] = useState("");
-
-//     const { zapEvent } = useNostr();
-
-//     const handleZapButton = (amount) => {
-//         setZapAmount(amount);
-//     };
-
-//     const handleCustomAmountChange = (event) => {
-//         setZapAmount(event.target.value);
-//     };
-
-//     const handleCommentChange = (event) => {
-//         setComment(event.target.value);
-//     };
-
-//     const handleSubmit = async () => {
-//         const millisatAmount = zapAmount * 1000;
-//         const response = await zapEvent(event, millisatAmount, comment);
-
-//         console.log('zap response:', response);
-//     };
-
-//     return (
-//         <div className="flex flex-col">
-//             <div className="flex flex-row justify-start">
-//                 {[1, 10, 21, 100, 500, 1000].map(amount => (
-//                     <Button key={amount} label={amount.toString()} icon="pi pi-bolt" severity="success"
-//                             rounded className="mr-2" onClick={() => handleZapButton(amount)} />
-//                 ))}
-//             </div>
-//             <div className="flex flex-row w-[100%] justify-between my-4">
-//                 <InputText placeholder="Custom Amount" value={zapAmount} onChange={handleCustomAmountChange} />
-//             </div>
-//             <InputTextarea rows={5} placeholder="Message" value={comment} onChange={handleCommentChange} />
-//             <Button label="Zap" icon="pi pi-bolt" severity="success" className="mt-4" onClick={handleSubmit} />
-//         </div>
-//     );
-// };
-
-// export default ZapForm;

src/hooks/nostrQueries/zaps/useZapsQuery.js

@@ -20,6 +20,9 @@ export function useZapsQuery({ event, type }) {
             ];
 
             const events = await ndk.fetchEvents(filters, { closeOnEose: true });
+            if (event.id === "f679183f0e66878142186cf7d0ae44ab137dabed1dfcb28a609472afbb7c8d51") {
+                console.log('events', events);
+            }
             return events;
         } catch (error) {
             console.error('Error fetching zaps from NDK:', error);
@@ -29,7 +32,7 @@ export function useZapsQuery({ event, type }) {
 
     const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
         queryKey: ['zaps', isClient, event, type],
-        queryFn: () => fetchZaps(event),
+        queryFn: async () => await fetchZaps(event),
         staleTime: 10000, // 10 seconds
         refetchInterval: 10000, // 10 seconds
         enabled: isClient,

src/hooks/nostrQueries/zaps/useZapsSubscription.js

@@ -16,7 +16,6 @@ export function useZapsSubscription({ event }) {
         if (!isClient || !ndk || !event) return;
 
         let subscription = null;
-        let isSubscribed = true;
 
         const fetchZapsFromNDK = async () => {
             try {
@@ -31,11 +30,9 @@ export function useZapsSubscription({ event }) {
                 subscription = ndk.subscribe(filters);
 
                 subscription.on('event', (zap) => {
-                    if (isSubscribed) {
+                    uniqueEvents.add(zap);
-                        uniqueEvents.add(zap);
+                    setZaps(Array.from(uniqueEvents));
-                        setZaps(Array.from(uniqueEvents));
+                    setZapsLoading(false);
-                        setZapsLoading(false);
-                    }
                 });
 
                 subscription.on('eose', () => {
@@ -43,6 +40,14 @@ export function useZapsSubscription({ event }) {
                     setZapsLoading(false);
                 });
 
+                // if there are no zaps for 15 seconds and no eose to stop loading
+                setTimeout(() => {
+                    if (uniqueEvents.size === 0) {
+                        setZapsLoading(false);
+                        setZaps(Array.from(uniqueEvents));
+                    }
+                }, 15000);
+
             } catch (error) {
                 setZapsError('Error fetching zaps from NDK: ' + error);
                 setZapsLoading(false);
@@ -52,7 +57,6 @@ export function useZapsSubscription({ event }) {
         fetchZapsFromNDK();
 
         return () => {
-            isSubscribed = false;
             if (subscription) {
                 subscription.stop();
             }

src/pages/details/[slug].js

@@ -33,7 +33,7 @@ export default function Details() {
     const [author, setAuthor] = useState(null);
     const [bitcoinConnect, setBitcoinConnect] = useState(false);
     const [nAddress, setNAddress] = useState(null);
-    const [zapAmount, setZapAmount] = useState(0);
+    const [zapAmount, setZapAmount] = useState(null);
 
     const ndk = useNDKContext();
     const [user] = useLocalStorageWithEffect('user', {});
@@ -122,7 +122,7 @@ export default function Details() {
     }, [processedEvent]);
 
     useEffect(() => {
-        if (!zaps || zaps.length === 0) return;
+        if (!zaps) return;
 
         let total = 0;
         zaps.forEach((zap) => {
@@ -133,6 +133,7 @@ export default function Details() {
                 total += amount;
             }
         });
+
         setZapAmount(total);
     }, [zaps]);