fix(rdi): standardize loader behavior in pipeline and analytics pages

References: #RI-7839

Author: pd-redis

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx

@@ -23,7 +23,7 @@ import { Modal } from 'uiSrc/components/base/display/modal'
 import { UploadWarningBanner } from 'uiSrc/components/upload-warning/styles'
 
 export interface Props {
-  loading: boolean
+  loading?: boolean
   disabled: boolean
   onReset: () => void
 }

redisinsight/ui/src/pages/rdi/instance/components/header/components/pipeline-actions/PipelineActions.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
+import styled from 'styled-components'
 import {
   getPipelineStatusAction,
   rdiPipelineActionSelector,
@@ -23,13 +24,12 @@ import {
 } from 'uiSrc/slices/interfaces'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Theme } from 'uiSrc/components/base/theme/types'
 import DeployPipelineButton from '../buttons/deploy-pipeline-button'
 import ResetPipelineButton from '../buttons/reset-pipeline-button'
 import RdiConfigFileActionMenu from '../rdi-config-file-action-menu'
 import StopPipelineButton from '../buttons/stop-pipeline-button'
 import StartPipelineButton from '../buttons/start-pipeline-button/StartPipelineButton'
-import styled from 'styled-components'
-import { Theme } from 'uiSrc/components/base/theme/types'
 
 const VerticalDelimiter = styled(FlexItem)`
   border: ${({ theme }: { theme: Theme }) => theme.components.appBar.separator};
@@ -183,11 +183,7 @@ const PipelineActions = ({ collectorStatus, pipelineStatus }: Props) => {
         ) : null}
       </FlexItem>
       <FlexItem>
-        <DeployPipelineButton
-          loading={deployLoading}
-          disabled={disabled}
-          onReset={resetPipeline}
-        />
+        <DeployPipelineButton disabled={disabled} onReset={resetPipeline} />
       </FlexItem>
       <FlexItem>
         <RdiConfigFileActionMenu />

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/Navigation.tsx

@@ -5,8 +5,8 @@ import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { Nullable } from 'uiSrc/utils'
 import { PageNames, Pages } from 'uiSrc/constants'
 import { Title } from 'uiSrc/components/base/text'
-import { Loader } from 'uiSrc/components/base/display'
 import { Col } from 'uiSrc/components/base/layout/flex'
+import { LoadingContent } from 'uiSrc/components/base'
 import { RdiPipelineTabs } from 'uiSrc/slices/interfaces/rdi'
 import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
 
@@ -55,7 +55,7 @@ const Navigation = () => {
         Pipeline management
       </Title>
 
-      {loading && <Loader size="xl" />}
+      {loading && <LoadingContent lines={4} />}
 
       {!loading && (
         <>

redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx

@@ -202,7 +202,8 @@ const Config = () => {
           <Row grow={false} justify="end">
             <PrimaryButton
               onClick={testConnections}
-              loading={testingConnections || pipelineLoading}
+              loading={testingConnections}
+              disabled={pipelineLoading}
               aria-labelledby="test target connections"
               data-testid="rdi-test-connection-btn"
             >

redisinsight/ui/src/pages/rdi/statistics/styles.module.scss

@@ -15,6 +15,4 @@
   top: 0;
   left: 0;
   z-index: 2;
-  opacity: 0.8;
-  background-color: var(--euiColorLightestShade);
 }