From fd90fef94c289271eb1781205b0d6afc764c4f8a Mon Sep 17 00:00:00 2001
From: vinodkiran <vinodkiran@usa.net>
Date: Fri, 22 Dec 2023 14:50:10 +0530
Subject: [PATCH] Bugfix: Unncessary load of Prompts on chatflow open. This fix
 loads them on dialog open.

---
 .../dialog/PromptLangsmithHubDialog.js        | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js b/packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js
index 35b4ead7..8d89efc9 100644
--- a/packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js
+++ b/packages/ui/src/ui-component/dialog/PromptLangsmithHubDialog.js
@@ -92,24 +92,27 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
     const getAvailablePromptsApi = useApi(promptApi.getAvailablePrompts)
 
     useEffect(() => {
-        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
-        else dispatch({ type: HIDE_CANVAS_DIALOG })
+        if (show) {
+            dispatch({ type: SHOW_CANVAS_DIALOG })
+        } else dispatch({ type: HIDE_CANVAS_DIALOG })
         return () => dispatch({ type: HIDE_CANVAS_DIALOG })
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [show, dispatch])
 
     useEffect(() => {
-        if (promptType) {
+        if (promptType && show) {
+            setLoading(true)
             getAvailablePromptsApi.request({ tags: promptType === 'template' ? 'StringPromptTemplate&' : 'ChatPromptTemplate&' })
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [promptType])
+    }, [promptType, show])
 
     useEffect(() => {
         if (getAvailablePromptsApi.data && getAvailablePromptsApi.data.repos) {
             setAvailablePrompNameList(getAvailablePromptsApi.data.repos)
             if (getAvailablePromptsApi.data.repos?.length) handleListItemClick(0, getAvailablePromptsApi.data.repos)
+            setLoading(false)
         }
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -174,6 +177,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
     const [selectedPrompt, setSelectedPrompt] = useState({})
 
     const [accordionExpanded, setAccordionExpanded] = useState(['prompt'])
+    const [loading, setLoading] = useState(false)
 
     const handleAccordionChange = (accordionName) => (event, isExpanded) => {
         const accordians = [...accordionExpanded]
@@ -209,6 +213,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
         language.forEach((item) => {
             tags += `tags=${item.name}&`
         })
+        setLoading(true)
         getAvailablePromptsApi.request({ tags: tags })
     }
 
@@ -379,7 +384,15 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
                     </FormControl>
                 </Box>
 
-                {availablePrompNameList && availablePrompNameList.length == 0 && (
+                {loading && (
+                    <Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%', pb: 3 }} flexDirection='column'>
+                        <Box sx={{ p: 5, height: 'auto' }}>
+                            <img style={{ objectFit: 'cover', height: '20vh', width: 'auto' }} src={promptEmptySVG} alt='promptEmptySVG' />
+                        </Box>
+                        <div>Please wait....loading Prompts</div>
+                    </Stack>
+                )}
+                {!loading && availablePrompNameList && availablePrompNameList.length === 0 && (
                     <Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%', pb: 3 }} flexDirection='column'>
                         <Box sx={{ p: 5, height: 'auto' }}>
                             <img style={{ objectFit: 'cover', height: '20vh', width: 'auto' }} src={promptEmptySVG} alt='promptEmptySVG' />
@@ -387,7 +400,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
                         <div>No Available Prompts</div>
                     </Stack>
                 )}
-                {availablePrompNameList && availablePrompNameList.length > 0 && (
+                {!loading && availablePrompNameList && availablePrompNameList.length > 0 && (
                     <Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }} flexDirection='column'>
                         <Box sx={{ width: '100%', p: 2 }}>
                             <Grid xs={12} container spacing={1} justifyContent='center' alignItems='center'>