From d89d8be28c15e381c72039b908caeda30d0e63ef Mon Sep 17 00:00:00 2001
From: Sidharth Sethi <76687985+TechSpiritSS@users.noreply.github.com>
Date: Mon, 12 Jun 2023 02:21:17 +0530
Subject: [PATCH 1/2] Added Timeout in Is this page useful

---
 src/components/Layout/Feedback.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 6bb8a4aac6d..28d7fc44dc8 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useState} from 'react';
+import {useState, useEffect} from 'react';
 import {useRouter} from 'next/router';
 import {ga} from '../../utils/analytics';
 
@@ -60,8 +60,27 @@ function sendGAEvent(isPositive: boolean) {
 
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null;
+
+    if (isSubmitted) {
+      timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 3000);
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [isSubmitted]);
   return (
-    <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
+    <div
+      className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex"
+      style={{opacity: isVisible ? 1 : 0}}>
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
         {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
       </p>

From 3376271b85d6fcc92c2b446135c328b3a2da7777 Mon Sep 17 00:00:00 2001
From: Sidharth Sethi <76687985+TechSpiritSS@users.noreply.github.com>
Date: Wed, 14 Jun 2023 20:00:59 +0530
Subject: [PATCH 2/2] Fixed according to Comments

---
 src/components/Layout/Feedback.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 28d7fc44dc8..e3f12d0db58 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -79,8 +79,11 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   }, [isSubmitted]);
   return (
     <div
-      className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex"
-      style={{opacity: isVisible ? 1 : 0}}>
+      className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex transition-opacity duration-300"
+      style={{
+        display: isVisible ? 'flex' : 'none',
+        pointerEvents: isVisible ? 'auto' : 'none',
+      }}>
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
         {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
       </p>