RI-7214: Replace EUI loading logo with custom bouncing logo component

redisinsight/ui/src/components/base/display/index.ts

@@ -1,8 +1,9 @@
 import Loader from './loader/Loader'
 import ProgressBarLoader from './progress-bar/ProgressBarLoader'
 import RiImage from './image/RiImage'
+import RiLoadingLogo from './loading-logo/RiLoadingLogo'
 
-export { Loader, ProgressBarLoader, RiImage }
+export { Loader, ProgressBarLoader, RiImage, RiLoadingLogo }
 export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup'
 
 export type { RICollapsibleNavGroupProps } from './collapsible-nav-group/RICollapsibleNavGroup'

redisinsight/ui/src/components/base/display/loading-logo/RiLoadingLogo.tsx

@@ -0,0 +1,54 @@
+import React, { HTMLAttributes } from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const bounce = keyframes`
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-15px);
+  }
+`
+
+export const SIZES = ['M', 'L', 'XL', 'XXL'] as const
+
+export type RiLoadingLogoSize = (typeof SIZES)[number]
+
+export interface RiLoadingLogoProps extends HTMLAttributes<HTMLImageElement> {
+  src: string
+  $size?: RiLoadingLogoSize
+  $bounceSpeed?: number
+  alt?: string
+}
+
+const Wrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const BouncingLogo = styled.img<RiLoadingLogoProps>`
+  width: ${({ theme, $size = 'XL' }) =>
+    theme.components.iconButton.sizes[$size].width};
+  animation: ${bounce} ${({ $bounceSpeed }) => $bounceSpeed}s ease-in-out
+    infinite;
+`
+
+const RiLoadingLogo = ({
+  src,
+  $size = 'XL',
+  $bounceSpeed = 1,
+  alt = 'Loading logo',
+}: RiLoadingLogoProps) => (
+  <Wrapper>
+    <BouncingLogo
+      src={src}
+      $size={$size}
+      $bounceSpeed={$bounceSpeed}
+      alt={alt}
+    />
+  </Wrapper>
+)
+
+export default RiLoadingLogo

redisinsight/ui/src/components/page-placeholder/PagePlaceholder.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { EuiLoadingLogo, EuiEmptyPrompt } from '@elastic/eui'
-import LogoIcon from 'uiSrc/assets/img/logo_small.svg?react'
+import { EuiEmptyPrompt } from '@elastic/eui'
+import LogoIcon from 'uiSrc/assets/img/logo_small.svg'
 import { getConfig } from 'uiSrc/config'
+import { RiLoadingLogo } from 'uiSrc/components/base/display'
 
 const riConfig = getConfig()
 
@@ -10,13 +11,7 @@ const PagePlaceholder = () => (
     {riConfig.app.env !== 'development' && (
       <EuiEmptyPrompt
         data-testid="page-placeholder"
-        icon={
-          <EuiLoadingLogo
-            logo={LogoIcon}
-            size="xl"
-            style={{ fontSize: '40px' }}
-          />
-        }
+        icon={<RiLoadingLogo src={LogoIcon} $size="XXL" />}
         titleSize="s"
       />
     )}