RI-7060: Replace EUI Loading Spinner with Redis Loader (#4631)

* export the loader
* replace everywhere
* add support for t shirt sizing for redis ui loader and conversion to pixels

Author: dantovska

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

@@ -0,0 +1 @@
+export { default as Loader } from './loader/Loader'

redisinsight/ui/src/components/base/display/loader/Loader.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentProps } from 'react'
+
+import { Loader as RedisLoader } from '@redis-ui/components'
+import { useTheme, theme } from '@redis-ui/styles'
+
+type Space = typeof theme.core.space
+
+export type RedisLoaderProps = ComponentProps<typeof RedisLoader>
+
+const convertSizeToPx = (tShirtSize: string, space: Space) => {
+  switch (tShirtSize.toLowerCase()) {
+    case 's':
+      return space.space050
+    case 'm':
+      return space.space100
+    case 'l':
+      return space.space250
+    case 'xl':
+      return space.space300
+    default:
+      return space.space100
+  }
+}
+
+export default function Loader({ size, ...rest }: RedisLoaderProps) {
+  const theme = useTheme()
+  const { space } = theme.core
+  const sizeInPx = size ? convertSizeToPx(size, space) : space.space100
+  return <RedisLoader size={sizeInPx} {...rest} />
+}

redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent, ReactNode } from 'react'
-import { EuiLoadingSpinner } from '@elastic/eui'
 import { isArray, isUndefined, toNumber } from 'lodash'
 
 import {
@@ -27,6 +26,7 @@ import {
   UserDarkIcon,
   UserLightIcon,
 } from 'uiSrc/components/database-overview/components/icons'
+import { Loader } from 'uiSrc/components/base/display'
 
 import styles from './styles.module.scss'
 
@@ -103,7 +103,7 @@ function getCpuUsage(cpuUsagePercentage: number | null, theme: string) {
       cpuUsagePercentage === null ? (
         <>
           <div className={styles.calculationWrapper}>
-            <EuiLoadingSpinner className={styles.spinner} size="m" />
+            <Loader className={styles.spinner} size="m" />
             <span className={styles.calculation}>Calculating...</span>
           </div>
         </>

redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx

@@ -1,7 +1,6 @@
 import {
   EuiFilePicker,
   EuiIcon,
-  EuiLoadingSpinner,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -21,6 +20,7 @@ import {
 } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { ColorText, Text } from 'uiSrc/components/base/text'
+import { Loader } from 'uiSrc/components/base/display'
 import styles from './styles.module.scss'
 
 export interface Props<T> {
@@ -112,7 +112,7 @@ const ImportFileModal = <T,>({
                 className={styles.loading}
                 data-testid="file-loading-indicator"
               >
-                <EuiLoadingSpinner size="xl" />
+                <Loader size="xl" />
                 <Text color="subdued" style={{ marginTop: 12 }}>
                   Uploading...
                 </Text>

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { EuiLoadingSpinner } from '@elastic/eui'
 import { useDispatch } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { checkConnectToRdiInstanceAction } from 'uiSrc/slices/rdi/instances'
@@ -20,6 +19,7 @@ import {
   Item as ListGroupItem,
 } from 'uiSrc/components/base/layout/list'
 import { Text } from 'uiSrc/components/base/text'
+import { Loader } from 'uiSrc/components/base/display'
 import { InstancesTabs } from '../../InstancesNavigationPopover'
 import styles from '../../styles.module.scss'
 
@@ -141,7 +141,7 @@ const InstancesList = ({
                 component="div"
               >
                 {loading && instance?.id === selected && (
-                  <EuiLoadingSpinner size="s" className={styles.loading} />
+                  <Loader size="s" className={styles.loading} />
                 )}
                 {instance.name} {getDbIndex(instance.db)}
               </Text>

redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { EuiIcon, EuiLoadingSpinner, EuiPopover } from '@elastic/eui'
+import { EuiIcon, EuiPopover } from '@elastic/eui'
 import cx from 'classnames'
 import { useHistory } from 'react-router-dom'
 import { logoutUserAction } from 'uiSrc/slices/oauth/cloud'
@@ -22,6 +22,7 @@ import { FeatureFlagComponent } from 'uiSrc/components'
 import { getConfig } from 'uiSrc/config'
 import { Text } from 'uiSrc/components/base/text'
 import { UserProfileLink } from 'uiSrc/components/base/link/UserProfileLink'
+import { Loader } from 'uiSrc/components/base/display'
 import { CloudUser } from 'apiSrc/modules/cloud/user/models'
 import styles from './styles.module.scss'
 
@@ -174,7 +175,7 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
                     />
                   )}
                   {id === selectingAccountId && (
-                    <EuiLoadingSpinner
+                    <Loader
                       className={styles.loadingSpinner}
                       size="m"
                       data-testid={`user-profile-selecting-account-${id}`}
@@ -220,7 +221,7 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
             >
               <Text className={styles.optionTitle}>Import Cloud databases</Text>
               {isImportLoading ? (
-                <EuiLoadingSpinner className={styles.loadingSpinner} size="m" />
+                <Loader className={styles.loadingSpinner} size="m" />
               ) : (
                 <EuiIcon type="importAction" />
               )}

redisinsight/ui/src/components/main-router/components/SuspenseLoader.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { EuiLoadingSpinner } from '@elastic/eui'
+import { Loader } from 'uiSrc/components/base/display'
 import styles from './loader.module.scss'
 
 const SuspenseLoader = () => (
   <div className={styles.cover} data-testid="suspense-loader">
-    <EuiLoadingSpinner size="xl" className={styles.loader} />
+    <Loader size="xl" className={styles.loader} />
   </div>
 )
 

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
   EuiIcon,
-  EuiLoadingSpinner,
 } from '@elastic/eui'
 import { find } from 'lodash'
 import cx from 'classnames'
@@ -29,6 +28,7 @@ import {
 } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Link } from 'uiSrc/components/base/link/Link'
+import { Loader } from 'uiSrc/components/base/display'
 import styles from './styles.module.scss'
 
 export enum InfiniteMessagesIds {
@@ -54,7 +54,7 @@ export const INFINITE_MESSAGES = {
       <div role="presentation" data-testid="authenticating-notification">
         <Row justify="end">
           <FlexItem>
-            <EuiLoadingSpinner
+            <Loader
               className={cx('infiniteMessage__icon', styles.loading)}
             />
           </FlexItem>
@@ -74,7 +74,7 @@ export const INFINITE_MESSAGES = {
       <div role="presentation" data-testid="pending-create-db-notification">
         <Row justify="end">
           <FlexItem grow={false}>
-            <EuiLoadingSpinner
+            <Loader
               className={cx('infiniteMessage__icon', styles.loading)}
             />
           </FlexItem>
@@ -340,7 +340,7 @@ export const INFINITE_MESSAGES = {
       <div role="presentation" data-testid="pending-create-db-notification">
         <Row justify="end">
           <FlexItem>
-            <EuiLoadingSpinner
+            <Loader
               className={cx('infiniteMessage__icon', styles.loading)}
             />
           </FlexItem>

redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { EuiLoadingSpinner } from '@elastic/eui'
 import cx from 'classnames'
 import OAuthSignInButton from 'uiSrc/components/oauth/oauth-sign-in-button'
 import {
@@ -14,6 +13,7 @@ import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { appInfoSelector } from 'uiSrc/slices/app/info'
 import { PackageType } from 'uiSrc/constants/env'
 import UserProfileBadge from 'uiSrc/components/instance-header/components/user-profile/UserProfileBadge'
+import { Loader } from 'uiSrc/components/base/display'
 
 import styles from './styles.module.scss'
 
@@ -41,7 +41,7 @@ const OAuthUserProfile = (props: Props) => {
     if (initialLoading) {
       return (
         <div className={styles.loadingContainer}>
-          <EuiLoadingSpinner
+          <Loader
             className={cx('infiniteMessage__icon', styles.loading)}
             size="l"
             data-testid="oath-user-profile-spinner"

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx

@@ -7,13 +7,14 @@ import React, {
 } from 'react'
 import cx from 'classnames'
 
-import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui'
+import { EuiIcon } from '@elastic/eui'
 import { throttle } from 'lodash'
 import {
   AiChatMessage,
   AiChatMessageType,
 } from 'uiSrc/slices/interfaces/aiAssistant'
 import { Nullable, scrollIntoView } from 'uiSrc/utils'
+import { Loader } from 'uiSrc/components/base/display'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import LoadingMessage from '../loading-message'
@@ -153,7 +154,7 @@ const ChatHistory = (props: Props) => {
   if (isLoading) {
     return (
       <div className={cx(styles.wrapper, styles.loader)}>
-        <EuiLoadingSpinner size="xl" data-testid="ai-loading-spinner" />
+        <Loader size="xl" data-testid="ai-loading-spinner" />
       </div>
     )
   }