add loading status

client/src/components/cards/LoadingCard.tsx

@@ -0,0 +1,35 @@
+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,7 +1,11 @@
 import { ReactElement } from 'react';
 
-export interface EmptyCardProps {
-  icon: ReactElement;
+interface CardProps {
   text: string;
   wrapperClass?: string;
 }
+export interface EmptyCardProps extends CardProps {
+  icon: ReactElement;
+}
+
+export interface LoadingCardProps extends CardProps {}

client/src/components/status/StatusIcon.tsx

@@ -16,14 +16,14 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const StatusIcon: FC<StatusIconType> = props => {
   const classes = useStyles();
-  const { type, className = "" } = props;
+  const { type, className = '', size = 20 } = props;
 
   const getElement = (type: ChildrenStatusType): ReactElement => {
     switch (type) {
       case 'creating':
         return (
           <CircularProgress
-            size={20}
+            size={size}
             thickness={8}
             classes={{ svg: classes.svg }}
           />
@@ -35,7 +35,9 @@ const StatusIcon: FC<StatusIconType> = props => {
     }
   };
 
-  return <div className={`${classes.wrapper} ${className}`}>{getElement(type)}</div>;
+  return (
+    <div className={`${classes.wrapper} ${className}`}>{getElement(type)}</div>
+  );
 };
 
 export default StatusIcon;

client/src/components/status/Types.ts

@@ -20,4 +20,5 @@ export enum ChildrenStatusType {
 export type StatusIconType = {
   type: ChildrenStatusType;
   className?: string;
+  size?: number;
 };

client/src/http/Collection.ts

@@ -122,6 +122,7 @@ export class CollectionHttp extends BaseModel implements CollectionView {
       : this._loadedPercentage === '100'
       ? LOADING_STATE.LOADED
       : LOADING_STATE.LOADING;
+    // return LOADING_STATE.LOADING
   }
 
   get _fields() {

client/src/i18n/cn/overview.ts

@@ -3,6 +3,7 @@ const overviewTrans = {
   all: 'All Collections',
   data: 'Data',
   rows: '{{number}} Entities',
+  loading: 'Loading Collections',
 };
 
 export default overviewTrans;

client/src/i18n/en/overview.ts

@@ -3,6 +3,7 @@ const overviewTrans = {
   all: 'All Collections',
   data: 'Data',
   rows: '{{number}} Entities',
+  loading: 'Loading Collections',
 };
 
 export default overviewTrans;

client/src/pages/overview/Overview.tsx

@@ -2,6 +2,7 @@ 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';
@@ -42,11 +43,13 @@ const Overview = () => {
     collectionCount: 0,
     totalData: 0,
   });
+  const [loading, setLoading] = useState(false);
 
   const [loadCollections, setLoadCollections] = useState<CollectionHttp[]>([]);
   const { openSnackBar } = useContext(rootContext);
 
   const fetchData = useCallback(async () => {
+    setLoading(true);
     const res = await CollectionHttp.getStatistics();
     const collections = await CollectionHttp.getCollections();
     const loadCollections = collections.filter(
@@ -54,6 +57,7 @@ const Overview = () => {
     );
     setStatistics(res);
     setLoadCollections(loadCollections);
+    setLoading(false);
   }, []);
 
   useEffect(() => {
@@ -106,7 +110,13 @@ const Overview = () => {
       <Typography className={classes.collectionTitle}>
         {overviewTrans('load')}
       </Typography>
-      {loadCollections.length > 0 ? (
+
+      {loading ? (
+        <LoadingCard
+          text={overviewTrans('loading')}
+          wrapperClass="page-empty-card"
+        />
+      ) : loadCollections.length > 0 ? (
         <div className={classes.cardsWrapper}>
           {loadCollections.map(collection => (
             <CollectionCard