From cdb07fc3c48847c2ac0093f3e7b41ac70f5d1ad9 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Mon, 14 Aug 2023 22:27:41 +0530
Subject: [PATCH] added css animations for saved state

---
 apps/app/components/issues/description-form.tsx |  8 ++++----
 apps/app/components/tiptap/index.tsx            |  2 --
 apps/app/styles/editor.css                      | 11 +++++++++++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index b39cf7b5b..7c163527a 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -71,7 +71,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     if (isSubmitting === "submitted") {
       setTimeout(async () => {
         setIsSubmitting("saved");
-      }, 1000);
+      }, 2000);
     }
   }, [isSubmitting]);
 
@@ -154,9 +154,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
             );
           }}
         />
-        {isSubmitting !== "saved" && (<div className="absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center">
-          {isSubmitting === "submitting" ? "Saving..." : "Saved"}
-        </div>)}
+        <div className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${isSubmitting === 'saved' ? 'fadeOut' : 'fadeIn'}`}>
+          {isSubmitting === 'submitting' ? 'Saving...' : 'Saved'}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx
index b4850ed7e..3220d127b 100644
--- a/apps/app/components/tiptap/index.tsx
+++ b/apps/app/components/tiptap/index.tsx
@@ -58,11 +58,9 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
 
   useImperativeHandle(forwardedRef, () => ({
     clearEditor: () => {
-      console.log(editorRef);
       editorRef.current?.commands.clearContent();
     },
     setEditorValue: (content: string) => {
-      console.log(editorRef, forwardedRef, content);
       editorRef.current?.commands.setContent(content);
     },
   }));
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 7ffb7a0ac..05817c0dc 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -115,3 +115,14 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
 }
+
+.fadeIn {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fadeOut {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+