fix flickering

This commit is contained in:
Vardan Bansal 2023-09-18 17:14:52 -07:00
parent 5f5d4821d7
commit 1ce4ef93cd
2 changed files with 51 additions and 27 deletions

View File

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

View File

@ -1,4 +1,5 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react' import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { isEmpty } from 'lodash'
import { import {
Button, Button,
ButtonVariation, ButtonVariation,
@ -58,7 +59,8 @@ const ExecutionList = () => {
data: executions, data: executions,
error: executionsError, error: executionsError,
response, response,
refetch: executionsRefetch refetch: executionsRefetch,
loading: isFetchingExecutions
} = useGet<TypesExecution[]>({ } = useGet<TypesExecution[]>({
path: `/api/v1/repos/${repoMetadata?.path}/+/pipelines/${pipeline}/executions`, path: `/api/v1/repos/${repoMetadata?.path}/+/pipelines/${pipeline}/executions`,
queryParams: { page, limit: LIST_FETCHING_LIMIT }, queryParams: { page, limit: LIST_FETCHING_LIMIT },
@ -204,34 +206,41 @@ const ExecutionList = () => {
message: getString('executions.noData'), message: getString('executions.noData'),
button: NewExecutionButton button: NewExecutionButton
}}> }}>
<LoadingSpinner visible={loading || isInitialLoad} withBorder={!!executions && isInitialLoad} /> <LoadingSpinner
visible={loading || isInitialLoad || isFetchingExecutions}
withBorder={!!executions && isInitialLoad}
/>
<Container padding="xlarge"> <Container padding="xlarge">
<Layout.Horizontal spacing="large" className={css.layout}> <Layout.Horizontal spacing="large" className={css.layout}>
<Layout.Horizontal spacing="medium"> {!isEmpty(executions) && (
{NewExecutionButton} <>
<Button <Layout.Horizontal spacing="medium">
variation={ButtonVariation.SECONDARY} {NewExecutionButton}
text={getString('edit')} <Button
onClick={e => { variation={ButtonVariation.SECONDARY}
e.stopPropagation() text={getString('edit')}
if (repoMetadata?.path && pipeline) { onClick={e => {
history.push(routes.toCODEPipelineEdit({ repoPath: repoMetadata.path, pipeline })) e.stopPropagation()
} if (repoMetadata?.path && pipeline) {
}} history.push(routes.toCODEPipelineEdit({ repoPath: repoMetadata.path, pipeline }))
/> }
</Layout.Horizontal> }}
<FlexExpander /> />
<Button </Layout.Horizontal>
variation={ButtonVariation.TERTIARY} <FlexExpander />
text={getString('pipelines.settings')} <Button
onClick={e => { variation={ButtonVariation.TERTIARY}
e.stopPropagation() text={getString('pipelines.settings')}
if (repoMetadata?.path && pipeline) { onClick={e => {
history.push(routes.toCODEPipelineSettings({ repoPath: repoMetadata.path, pipeline })) e.stopPropagation()
} if (repoMetadata?.path && pipeline) {
}} history.push(routes.toCODEPipelineSettings({ repoPath: repoMetadata.path, pipeline }))
/> }
}}
/>
</>
)}
</Layout.Horizontal> </Layout.Horizontal>
<Container margin={{ top: 'medium' }}> <Container margin={{ top: 'medium' }}>