Fix confetti does not show up properly

src/components/Confetti.tsx

@@ -20,12 +20,7 @@ export function Confetti(props: ConfettiProps) {
     undefined | ConfettiPosition
   >();
 
-  useEffect(() => {
+  function populateConfettiPosition(element: HTMLElement) {
-    if (!element) {
-      setConfettiPos(undefined);
-      return;
-    }
-
     const elRect = element.getBoundingClientRect();
 
     // set confetti position, keeping in mind the scroll values
@@ -35,6 +30,15 @@ export function Confetti(props: ConfettiProps) {
       w: elRect?.width || 0,
       h: elRect?.height || 0,
     });
+  }
+
+  useEffect(() => {
+    if (!element) {
+      setConfettiPos(undefined);
+      return;
+    }
+
+    populateConfettiPosition(element);
   }, [element]);
 
   if (!confettiPos) {
@@ -47,7 +51,6 @@ export function Confetti(props: ConfettiProps) {
       numberOfPieces={40}
       recycle={false}
       onConfettiComplete={(confettiInstance) => {
-        confettiInstance?.reset();
         setConfettiPos(undefined);
         onDone();
       }}

src/components/Questions/QuestionsList.tsx

@@ -36,6 +36,17 @@ export function QuestionsList(props: QuestionsListProps) {
   const alreadyKnowRef = useRef<HTMLButtonElement>(null);
   const didNotKnowRef = useRef<HTMLButtonElement>(null);
 
+  function showConfetti(el: HTMLElement | null) {
+    // If confetti is already showing, remove that first
+    if (confettiEl) {
+      setConfettiEl(null);
+    }
+
+    window.setTimeout(() => {
+      setConfettiEl(el);
+    }, 0);
+  }
+
   async function fetchUserProgress(): Promise<
     UserQuestionProgress | undefined
   > {
@@ -146,7 +157,7 @@ export function QuestionsList(props: QuestionsListProps) {
           disabled={isLoading || isUpdatingStatus}
           ref={alreadyKnowRef}
           onClick={(e) => {
-            setConfettiEl(alreadyKnowRef.current);
+            showConfetti(alreadyKnowRef.current);
             updateQuestionStatus('know', currQuestion.id).finally(() => null);
           }}
           className="flex flex-1 items-center rounded-xl border border-gray-300 bg-white py-3 px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white disabled:pointer-events-none disabled:opacity-50"
@@ -157,7 +168,7 @@ export function QuestionsList(props: QuestionsListProps) {
         <button
           ref={didNotKnowRef}
           onClick={() => {
-            setConfettiEl(didNotKnowRef.current);
+            showConfetti(didNotKnowRef.current);
             updateQuestionStatus('dontKnow', currQuestion.id).finally(
               () => null
             );