allow form fadein to be suppressed on rerender

dashboard/src/components/TabRegion.tsx

@@ -16,6 +16,7 @@ type PropsType = {
   defaultTab?: string;
   addendum?: any;
   color?: string | null;
+  suppressAnimation?: boolean;
 };
 
 type StateType = {};
@@ -38,49 +39,31 @@ export default class TabRegion extends Component<PropsType, StateType> {
     }
   }
 
-  renderContents = () => {
-    if (!this.props.currentTab) {
-      return <Loading />;
-    }
-
+  render() {
     return (
-      <Div>
-        <TabSelector
-          options={this.props.options}
-          color={this.props.color}
-          currentTab={this.props.currentTab}
-          setCurrentTab={(x: string) => this.props.setCurrentTab(x)}
-          addendum={this.props.addendum}
-        />
-        <Gap />
-        <TabContents>{this.props.children}</TabContents>
-      </Div>
+      <StyledTabRegion suppressAnimation={this.props.suppressAnimation}>
+        {
+          !this.props.currentTab ? (
+            <Loading />
+          ) : (
+            <>
+              <TabSelector
+                options={this.props.options}
+                color={this.props.color}
+                currentTab={this.props.currentTab}
+                setCurrentTab={(x: string) => this.props.setCurrentTab(x)}
+                addendum={this.props.addendum}
+              />
+              <Gap />
+              <TabContents>{this.props.children}</TabContents>
+            </>
+          )
+        }
+      </StyledTabRegion>
     );
-  };
-
-  render() {
-    return <StyledTabRegion>{this.renderContents()}</StyledTabRegion>;
   }
 }
 
-const Placeholder = styled.div`
-  width: 100%;
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff11;
-  border-radius: 5px;
-  color: #ffffff44;
-  font-size: 13px;
-`;
-
-const Div = styled.div`
-  width: 100%;
-  height: 100%;
-  animation: fadeIn 0.25s 0s;
-`;
-
 const TabContents = styled.div`
   height: calc(100% - 65px);
 `;
@@ -91,9 +74,10 @@ const Gap = styled.div`
   height: 30px;
 `;
 
-const StyledTabRegion = styled.div`
+const StyledTabRegion = styled.div<{ suppressAnimation: boolean }>`
   width: 100%;
   height: 100%;
+  animation: ${props => props.suppressAnimation ? "" : "fadeIn 0.25s 0s"};
   position: relative;
   overflow-y: auto;
   overflow: visible;

dashboard/src/components/form-refactor/PorterForm.tsx

@@ -181,6 +181,7 @@ const PorterForm: React.FC<Props> = (props) => {
         options={getTabOptions()}
         currentTab={currentTab}
         setCurrentTab={setCurrentTab}
+        suppressAnimation={true}
       >
         {renderTab()}
       </TabRegion>

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -736,10 +736,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
               </TabButton>
             }
             saveValuesStatus={saveValuesStatus}
-            externalValues={{
-              namespace: props.namespace,
-              clusterId: currentCluster.id,
-            }}
           />
         </BodyWrapper>
       </StyledExpandedChart>
@@ -791,7 +787,8 @@ const Header = styled.div`
 `;
 
 const Placeholder = styled.div`
-  height: 100%;
+  min-height: 400px;
+  height: 50vh;
   padding: 30px;
   padding-bottom: 90px;
   font-size: 13px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -661,7 +661,8 @@ const Header = styled.div`
 `;
 
 const Placeholder = styled.div`
-  height: 100%;
+  min-height: 400px;
+  height: 50vh;
   padding: 30px;
   padding-bottom: 70px;
   font-size: 13px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobList.tsx

@@ -112,7 +112,8 @@ export default withAuth(JobList);
 
 const Placeholder = styled.div`
   width: 100%;
-  height: 100%;
+  min-height: 400px;
+  height: 50vh;
   display: flex;
   align-items: center;
   justify-content: center;

dashboard/src/main/home/launch/launch-flow/SettingsPage.tsx

@@ -138,7 +138,7 @@ class SettingsPage extends Component<PropsType, StateType> {
         onSubmit,
       } = this.props;
       return (
-        <>
+        <FadeWrapper>
           <Heading>Additional Settings</Heading>
           <Helper>
             Configure additional settings for this template. (Optional)
@@ -151,9 +151,9 @@ class SettingsPage extends Component<PropsType, StateType> {
               namespace: selectedNamespace,
               clusterId: this.context.currentCluster.id,
             }}
-            externalValues={{
-              isLaunch: true,
-            }}
+            //externalValues={{
+            //  isLaunch: true,
+            //}}
             isReadOnly={
               !this.props.isAuthorized("namespace", "", ["get", "create"])
             }
@@ -161,7 +161,7 @@ class SettingsPage extends Component<PropsType, StateType> {
               onSubmit(val)
             }}
           />
-        </>
+        </FadeWrapper>
       );
     } else {
       return (
@@ -362,6 +362,10 @@ const Link = styled.a`
   margin-left: 5px;
 `;
 
+const FadeWrapper = styled.div`
+  animation: fadeIn 0.25s 0s;
+`;
+
 const Wrapper = styled.div`
   width: 100%;
   position: relative;