From 5401f105b8dda1c14ba55fde8b1765241d7a9cfc Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Wed, 2 Apr 2025 16:52:48 +0530
Subject: [PATCH] fix: link modal text flicker

---
 .../home/widgets/links/create-update-link-modal.tsx   |  4 +---
 web/core/components/home/widgets/links/root.tsx       | 11 +++++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/core/components/home/widgets/links/create-update-link-modal.tsx b/web/core/components/home/widgets/links/create-update-link-modal.tsx
index dccc09f5f3e..354fdae0c3c 100644
--- a/web/core/components/home/widgets/links/create-update-link-modal.tsx
+++ b/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -21,7 +21,6 @@ export type TLinkCreateEditModal = {
   handleOnClose?: () => void;
   linkOperations: TLinkOperationsModal;
   preloadedData?: TLinkCreateFormFieldOptions;
-  setLinkData: (link: TLink | undefined) => void;
 };
 
 const defaultValues: TLinkCreateFormFieldOptions = {
@@ -31,7 +30,7 @@ const defaultValues: TLinkCreateFormFieldOptions = {
 
 export const LinkCreateUpdateModal: FC<TLinkCreateEditModal> = observer((props) => {
   // props
-  const { setLinkData, isModalOpen, handleOnClose, linkOperations, preloadedData } = props;
+  const { isModalOpen, handleOnClose, linkOperations, preloadedData } = props;
   // react hook form
   const {
     formState: { errors, isSubmitting },
@@ -45,7 +44,6 @@ export const LinkCreateUpdateModal: FC<TLinkCreateEditModal> = observer((props)
 
   const onClose = () => {
     if (handleOnClose) handleOnClose();
-    setLinkData(undefined);
   };
 
   const handleFormSubmit = async (formData: TLinkCreateFormFieldOptions) => {
diff --git a/web/core/components/home/widgets/links/root.tsx b/web/core/components/home/widgets/links/root.tsx
index 0cd9d30e6e4..e9097361bd0 100644
--- a/web/core/components/home/widgets/links/root.tsx
+++ b/web/core/components/home/widgets/links/root.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Plus } from "lucide-react";
@@ -16,6 +17,11 @@ export const DashboardQuickLinks = observer((props: THomeWidgetProps) => {
   } = useHome();
   const { t } = useTranslation();
 
+  const handleCreateLinkModal = useCallback(() => {
+    toggleLinkModal(true);
+    setLinkData(undefined);
+  }, []);
+
   useSWR(
     workspaceSlug ? `HOME_LINKS_${workspaceSlug}` : null,
     workspaceSlug ? () => fetchLinks(workspaceSlug.toString()) : null,
@@ -32,15 +38,12 @@ export const DashboardQuickLinks = observer((props: THomeWidgetProps) => {
         handleOnClose={() => toggleLinkModal(false)}
         linkOperations={linkOperations}
         preloadedData={linkData}
-        setLinkData={setLinkData}
       />
       <div className="mb-2">
         <div className="flex items-center justify-between mb-4">
           <div className="text-base font-semibold text-custom-text-350">{t("home.quick_links.title_plural")}</div>
           <button
-            onClick={() => {
-              toggleLinkModal(true);
-            }}
+            onClick={handleCreateLinkModal}
             className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
           >
             <Plus className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>