fix hogfetti rendering

PostHog · Oct 30, 2024 · 063938f · 063938f
1 parent 371a52a
commit 063938f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git 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
@@ -135,6 +135,7 @@ export const BillingUnsubscribeModal = (): JSX.Element => {
 
     return <UnsubscribeSurveyModal product={billingJson.products[0]} />
 }
+
 export const BillingUnsubscribeModal_DataPipelines = (): JSX.Element => {
     useStorybookMocks({
         get: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,6 +135,7 @@ export const BillingUnsubscribeModal = (): JSX.Element => { @@
         return <UnsubscribeSurveyModal product={billingJson.products[0]} />
     }
     export const BillingUnsubscribeModal_DataPipelines = (): JSX.Element => {
         useStorybookMocks({
             get: {
@@ Expand Down @@