UI: small fix: hide form after submitting (#981)

* UI: small fix: hide form after submitting
evidentlyai · Feb 7, 2024 · 0ccbcf8 · 0ccbcf8
1 parent e8720df
commit 0ccbcf8
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 6 deletions.
diff --git a/src/evidently/ui/ui/index.html b/src/evidently/ui/ui/index.html
@@ -11,7 +11,7 @@
       content="Evidently - ML Monitoring Demo. Hosted example to monitor the performance of a demand forecasting model on a toy dataset."
     />
     <title>Evidently - ML Monitoring Demo</title>
-    <script type="module" crossorigin src="/static/js/index-60d52bdf.js"></script>
+    <script type="module" crossorigin src="/static/js/index-4e1be776.js"></script>
     <link rel="modulepreload" crossorigin href="/static/js/vendor-19847e6d.js">
     <link rel="stylesheet" href="/static/css/index.css">
   </head>

diff --git a/...idently/ui/ui/static/js/index-60d52bdf.js → ...idently/ui/ui/static/js/index-4e1be776.js b/...idently/ui/ui/static/js/index-60d52bdf.js → ...idently/ui/ui/static/js/index-4e1be776.js
diff --git a/...idently/ui/ui/static/js/index-99b6ee9b.js → ...idently/ui/ui/static/js/index-9281ebbb.js b/...idently/ui/ui/static/js/index-99b6ee9b.js → ...idently/ui/ui/static/js/index-9281ebbb.js
diff --git a/src/evidently/ui/ui/static/js/index-e131f011.js b/src/evidently/ui/ui/static/js/index-e131f011.js
diff --git a/src/evidently/ui/ui/static/js/index-ec143eac.js b/src/evidently/ui/ui/static/js/index-ec143eac.js
diff --git a/ui/packages/evidently-ui-lib/src/components/ProjectCard.tsx b/ui/packages/evidently-ui-lib/src/components/ProjectCard.tsx
@@ -211,9 +211,23 @@ export const AddNewProjectButton = ({
   children?: React.ReactNode
 }) => {
   const [on, toggle] = useToggle(false)
+  const [wasSubmitting, toggleSubmitting] = useToggle(false)
   const navigation = useNavigation()
   const isDisabled = navigation.state !== 'idle'
 
+  useEffect(() => {
+    if (navigation.state === 'submitting') {
+      toggleSubmitting(true)
+    }
+  }, [navigation.state === 'submitting'])
+
+  useEffect(() => {
+    if (wasSubmitting && navigation.state === 'idle') {
+      toggle(false)
+      toggleSubmitting(false)
+    }
+  }, [wasSubmitting, navigation.state === 'idle'])
+
   return (
     <Box py={2}>
       <Box display={'flex'} justifyContent={'center'}>
@@ -231,7 +245,7 @@ export const AddNewProjectButton = ({
         </Tooltip>
       </Box>
 
-      <Fade in={on} unmountOnExit>
+      {on && (
         <Box py={1} display={'flex'} flexDirection={'column'} rowGap={1}>
           {children}
           <EditProjectInfoForm
@@ -240,7 +254,7 @@ export const AddNewProjectButton = ({
             action="create-new-project"
           />
         </Box>
-      </Fade>
+      )}
     </Box>
   )
 }