fix flickering

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx

@@ -252,6 +252,10 @@ const AddUpdatePipeline = (): JSX.Element => {
   )
 
   const renderCTA = useCallback(() => {
+    /* Do not render CTA till pipeline existence info is obtained */
+    if (fetchingPipeline || !pipelineData) {
+      return <></>
+    }
     switch (selectedOption?.action) {
       case PipelineSaveAndRunAction.RUN:
         return (
@@ -310,7 +314,18 @@ const AddUpdatePipeline = (): JSX.Element => {
       default:
         return <></>
     }
-  }, [loading, fetchingPipeline, isDirty, repoMetadata, pipeline, selectedOption, isExistingPipeline, pipelineAsYAML])
+  }, [
+    loading,
+    fetchingPipeline,
+    fetchingPipelineYAMLFileContent,
+    isDirty,
+    repoMetadata,
+    pipeline,
+    selectedOption,
+    isExistingPipeline,
+    pipelineAsYAML,
+    pipelineData
+  ])
 
   if (fetchingPipeline || fetchingPipelineYAMLFileContent) {
     return <LoadingSpinner visible={true} />

web/src/pages/ExecutionList/ExecutionList.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { isEmpty } from 'lodash'
 import {
   Button,
   ButtonVariation,
@@ -58,7 +59,8 @@ const ExecutionList = () => {
     data: executions,
     error: executionsError,
     response,
-    refetch: executionsRefetch
+    refetch: executionsRefetch,
+    loading: isFetchingExecutions
   } = useGet<TypesExecution[]>({
     path: `/api/v1/repos/${repoMetadata?.path}/+/pipelines/${pipeline}/executions`,
     queryParams: { page, limit: LIST_FETCHING_LIMIT },
@@ -204,10 +206,15 @@ const ExecutionList = () => {
           message: getString('executions.noData'),
           button: NewExecutionButton
         }}>
-        <LoadingSpinner visible={loading || isInitialLoad} withBorder={!!executions && isInitialLoad} />
+        <LoadingSpinner
+          visible={loading || isInitialLoad || isFetchingExecutions}
+          withBorder={!!executions && isInitialLoad}
+        />
 
         <Container padding="xlarge">
           <Layout.Horizontal spacing="large" className={css.layout}>
+            {!isEmpty(executions) && (
+              <>
                 <Layout.Horizontal spacing="medium">
                   {NewExecutionButton}
                   <Button
@@ -232,6 +239,8 @@ const ExecutionList = () => {
                     }
                   }}
                 />
+              </>
+            )}
           </Layout.Horizontal>
 
           <Container margin={{ top: 'medium' }}>