fix: load form only if active

kubeshop · Jan 28, 2022 · 6b5897a · 6b5897a
1 parent 49992c2
commit 6b5897a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 19 deletions.
diff --git a/src/components/molecules/FormEditor/FormEditor.tsx b/src/components/molecules/FormEditor/FormEditor.tsx
@@ -106,13 +106,8 @@ const FormContainer = styled.div`
   }
 `;
 
-interface IProps {
-  formSchema: any;
-  formUiSchema: any;
-  isActive: boolean;
-}
-
-const FormEditor = ({formSchema, formUiSchema, isActive}: IProps) => {
+const FormEditor = (props: {formSchema: any; formUiSchema: any}) => {
+  const {formSchema, formUiSchema} = props;
   const selectedResource = useSelector(selectedResourceSelector);
   const [formData, setFormData] = useState<any>();
   const dispatch = useAppDispatch();
@@ -124,7 +119,7 @@ const FormEditor = ({formSchema, formUiSchema, isActive}: IProps) => {
 
   useDebounce(
     () => {
-      if (selectedResource && isActive) {
+      if (selectedResource) {
         let formString = stringify(formData);
         const content = mergeManifests(selectedResource.text, formString);
 
@@ -134,7 +129,7 @@ const FormEditor = ({formSchema, formUiSchema, isActive}: IProps) => {
       }
     },
     DEFAULT_EDITOR_DEBOUNCE,
-    [formData, selectedResource, isActive]
+    [formData, selectedResource]
   );
 
   useEffect(() => {

diff --git a/src/components/organisms/ActionsPane/ActionsPane.tsx b/src/components/organisms/ActionsPane/ActionsPane.tsx
@@ -444,13 +444,12 @@ const ActionsPane = (props: {contentHeight: string}) => {
               >
                 {uiState.isFolderLoading || previewLoader.isLoading ? (
                   <S.Skeleton active />
-                ) : (
+                ) : activeTabKey === 'form' ? (
                   <FormEditor
-                    isActive={activeTabKey === 'form'}
                     formSchema={resourceKindHandler.formEditorOptions.editorSchema}
                     formUiSchema={resourceKindHandler.formEditorOptions.editorUiSchema}
                   />
-                )}
+                ) : null}
               </TabPane>
             )}
             {selectedResource && resourceKindHandler && !isKustomizationResource(selectedResource) && (
@@ -461,13 +460,9 @@ const ActionsPane = (props: {contentHeight: string}) => {
               >
                 {uiState.isFolderLoading || previewLoader.isLoading ? (
                   <S.Skeleton active />
-                ) : (
-                  <FormEditor
-                    isActive={activeTabKey === 'metadataForm'}
-                    formSchema={getFormSchema('metadata')}
-                    formUiSchema={getUiSchema('metadata')}
-                  />
-                )}
+                ) : activeTabKey === 'metadataForm' ? (
+                  <FormEditor formSchema={getFormSchema('metadata')} formUiSchema={getUiSchema('metadata')} />
+                ) : null}
               </TabPane>
             )}
           </S.Tabs>