From 063938f77632bcc81c066ca75ad9c84c1fbc4f05 Mon Sep 17 00:00:00 2001
From: Zach Waterfield <zlwaterfield@gmail.com>
Date: Wed, 30 Oct 2024 17:20:09 -0400
Subject: [PATCH] fix hogfetti rendering

---
 .../src/lib/components/Hogfetti/Hogfetti.tsx  | 51 ++++++++++---------
 .../src/scenes/billing/Billing.stories.tsx    |  1 +
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/components/Hogfetti/Hogfetti.tsx b/frontend/src/lib/components/Hogfetti/Hogfetti.tsx
index 8a3481929f84c..be24513044011 100644
--- a/frontend/src/lib/components/Hogfetti/Hogfetti.tsx
+++ b/frontend/src/lib/components/Hogfetti/Hogfetti.tsx
@@ -135,31 +135,32 @@ export const useHogfetti = (options: HogfettiOptions = {}): HogfettiHook => {
         requestAnimationFrame(animationFrame)
     }, [count, power, duration, maxSize, dimensions])
 
-    const HogfettiComponent: React.FC = () => (
-        // eslint-disable-next-line react/forbid-dom-props
-        <div className="fixed top-0 left-0 w-full h-full pointer-events-none" style={{ zIndex: 9999 }}>
-            {particleSets.flatMap((set, setIndex) =>
-                set.map((particle, particleIndex) => {
-                    const HogComponent = images[particle.imageIndex]
-                    return (
-                        <div
-                            key={`${setIndex}-${particleIndex}`}
-                            className="absolute"
-                            // eslint-disable-next-line react/forbid-dom-props
-                            style={{
-                                left: `${particle.x}px`,
-                                top: `${particle.y}px`,
-                                opacity: particle.opacity,
-                                transition: 'opacity 0.1s linear',
-                            }}
-                        >
-                            <HogComponent width={particle.size} height={particle.size} />
-                        </div>
-                    )
-                })
-            )}
-        </div>
-    )
+    const HogfettiComponent: React.FC = () =>
+        particleSets.length === 0 ? null : (
+            // eslint-disable-next-line react/forbid-dom-props
+            <div className="fixed top-0 left-0 w-full h-full pointer-events-none" style={{ zIndex: 9999 }}>
+                {particleSets.flatMap((set, setIndex) =>
+                    set.map((particle, particleIndex) => {
+                        const HogComponent = images[particle.imageIndex]
+                        return (
+                            <div
+                                key={`${setIndex}-${particleIndex}`}
+                                className="absolute"
+                                // eslint-disable-next-line react/forbid-dom-props
+                                style={{
+                                    left: `${particle.x}px`,
+                                    top: `${particle.y}px`,
+                                    opacity: particle.opacity,
+                                    transition: 'opacity 0.1s linear',
+                                }}
+                            >
+                                <HogComponent width={particle.size} height={particle.size} />
+                            </div>
+                        )
+                    })
+                )}
+            </div>
+        )
 
     return { trigger, HogfettiComponent }
 }
diff --git a/frontend/src/scenes/billing/Billing.stories.tsx b/frontend/src/scenes/billing/Billing.stories.tsx
index 2217236800260..5fb26b3c4565c 100644
--- a/frontend/src/scenes/billing/Billing.stories.tsx
+++ b/frontend/src/scenes/billing/Billing.stories.tsx
@@ -135,6 +135,7 @@ export const BillingUnsubscribeModal = (): JSX.Element => {
 
     return <UnsubscribeSurveyModal product={billingJson.products[0]} />
 }
+
 export const BillingUnsubscribeModal_DataPipelines = (): JSX.Element => {
     useStorybookMocks({
         get: {