remove loading card

client/src/components/cards/EmptyCard.tsx

@@ -1,5 +1,7 @@
+import React, { FC } from 'react';
 import { makeStyles, Theme, Typography } from '@material-ui/core';
-import { FC } from 'react';
+import StatusIcon from '../status/StatusIcon';
+import { ChildrenStatusType } from '../status/Types';
 import { EmptyCardProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -17,13 +19,19 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const EmptyCard: FC<EmptyCardProps> = ({ icon, text, wrapperClass = '' }) => {
+const EmptyCard: FC<EmptyCardProps> = ({
+  icon,
+  text,
+  wrapperClass = '',
+  loading = false,
+}) => {
   const classes = useStyles();
 
   return (
     <section
       className={`flex-center card-wrapper ${classes.wrapper} ${wrapperClass}`}
     >
+      {loading && <StatusIcon type={ChildrenStatusType.CREATING} size={40} />}
       {icon}
       <Typography className={classes.text}>{text}</Typography>
     </section>

client/src/components/cards/LoadingCard.tsx

@@ -1,35 +0,0 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core';
-import { FC } from 'react';
-import StatusIcon from '../status/StatusIcon';
-import { ChildrenStatusType } from '../status/Types';
-import { LoadingCardProps } from './Types';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    backgroundColor: '#fff',
-    flexDirection: 'column',
-  },
-  text: {
-    marginTop: theme.spacing(4),
-    fontSize: '36px',
-    lineHeight: '42px',
-    color: theme.palette.milvusGrey.dark,
-    fontWeight: 'bold',
-    letterSpacing: '-0.02em',
-  },
-}));
-
-const LoadingCard: FC<LoadingCardProps> = ({ text, wrapperClass = '' }) => {
-  const classes = useStyles();
-
-  return (
-    <section
-      className={`flex-center card-wrapper ${classes.wrapper} ${wrapperClass}`}
-    >
-      <StatusIcon type={ChildrenStatusType.CREATING} size={40} />
-      <Typography className={classes.text}>{text}</Typography>
-    </section>
-  );
-};
-
-export default LoadingCard;

client/src/components/cards/Types.ts

@@ -1,11 +1,8 @@
 import { ReactElement } from 'react';
 
-interface CardProps {
+export interface EmptyCardProps {
   text: string;
+  icon?: ReactElement;
   wrapperClass?: string;
+  loading?: boolean;
 }
-export interface EmptyCardProps extends CardProps {
-  icon: ReactElement;
-}
-
-export interface LoadingCardProps extends CardProps {}

client/src/pages/overview/Overview.tsx

@@ -2,7 +2,6 @@ import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import EmptyCard from '../../components/cards/EmptyCard';
-import LoadingCard from '../../components/cards/LoadingCard';
 import icons from '../../components/icons/Icons';
 import { LOADING_STATE } from '../../consts/Milvus';
 import { rootContext } from '../../context/Root';
@@ -111,12 +110,7 @@ const Overview = () => {
         {overviewTrans('load')}
       </Typography>
 
-      {loading ? (
-        <LoadingCard
-          text={overviewTrans('loading')}
-          wrapperClass="page-empty-card"
-        />
-      ) : loadCollections.length > 0 ? (
+      {false && loadCollections.length > 0 ? (
         <div className={classes.cardsWrapper}>
           {loadCollections.map(collection => (
             <CollectionCard
@@ -128,9 +122,12 @@ const Overview = () => {
         </div>
       ) : (
         <EmptyCard
+          loading={loading}
           wrapperClass="page-empty-card"
-          icon={<CollectionIcon />}
-          text={collectionTrans('noLoadData')}
+          icon={!loading ? <CollectionIcon /> : undefined}
+          text={
+            loading ? overviewTrans('loading') : collectionTrans('noLoadData')
+          }
         />
       )}
     </section>