use content loader to improve user experience

frontend/package.json

@@ -38,13 +38,13 @@
         "version": "yarn format && git add -A"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "4.11.0",
-        "@typescript-eslint/parser": "4.11.0",
-        "eslint": "7.16.0",
+        "@typescript-eslint/eslint-plugin": "4.12.0",
+        "@typescript-eslint/parser": "4.12.0",
+        "eslint": "7.17.0",
         "eslint-config-prettier": "7.1.0",
         "eslint-plugin-license-header": "0.2.0",
-        "eslint-plugin-prettier": "3.3.0",
-        "eslint-plugin-react": "7.21.5",
+        "eslint-plugin-prettier": "3.3.1",
+        "eslint-plugin-react": "7.22.0",
         "eslint-plugin-react-hooks": "4.2.0",
         "lerna": "3.22.1",
         "lint-staged": "10.5.3",

frontend/packages/cli/package.json

@@ -35,13 +35,13 @@
     ],
     "dependencies": {
         "@visualdl/server": "2.1.4",
-        "open": "7.3.0",
-        "ora": "5.1.0",
+        "open": "7.3.1",
+        "ora": "5.2.0",
         "pm2": "4.5.1",
         "yargs": "16.2.0"
     },
     "devDependencies": {
-        "@types/node": "14.14.16",
+        "@types/node": "14.14.20",
         "@types/yargs": "15.0.12",
         "cross-env": "7.0.3",
         "ts-node": "9.1.1",

frontend/packages/core/babel.config.js

@@ -30,5 +30,5 @@ module.exports = {
             }
         ]
     ],
-    plugins: ['styled-components', '@babel/plugin-proposal-class-properties']
+    plugins: ['styled-components', '@babel/plugin-proposal-class-properties', 'emotion']
 };

frontend/packages/core/package.json

@@ -49,22 +49,23 @@
         "i18next-fetch-backend": "3.0.0",
         "jszip": "3.5.0",
         "lodash": "4.17.20",
-        "mime-types": "2.1.27",
+        "mime-types": "2.1.28",
         "moment": "2.29.1",
         "nprogress": "0.2.0",
         "numeric": "1.2.6",
         "polished": "4.0.5",
-        "query-string": "6.13.7",
+        "query-string": "6.13.8",
         "react": "17.0.1",
+        "react-content-loader": "5.1.4",
         "react-dom": "17.0.1",
         "react-helmet": "6.1.0",
-        "react-i18next": "11.8.4",
+        "react-i18next": "11.8.5",
         "react-input-range": "1.3.0",
         "react-is": "17.0.1",
         "react-rangeslider": "2.2.0",
         "react-redux": "7.2.2",
         "react-router-dom": "5.2.0",
-        "react-spinners": "0.9.0",
+        "react-spinners": "0.10.4",
         "react-toastify": "6.2.0",
         "redux": "4.0.5",
         "styled-components": "5.2.1",
@@ -85,24 +86,24 @@
         "@snowpack/plugin-optimize": "0.2.10",
         "@snowpack/plugin-run-script": "2.2.1",
         "@svgr/core": "5.5.0",
-        "@testing-library/jest-dom": "5.11.6",
+        "@testing-library/jest-dom": "5.11.8",
         "@testing-library/react": "11.2.2",
         "@types/d3": "6.2.0",
         "@types/d3-format": "2.0.0",
         "@types/echarts": "4.9.3",
         "@types/file-saver": "2.0.1",
-        "@types/jest": "26.0.19",
+        "@types/jest": "26.0.20",
         "@types/loadable__component": "5.13.1",
-        "@types/lodash": "4.14.166",
+        "@types/lodash": "4.14.167",
         "@types/mime-types": "2.1.0",
         "@types/nprogress": "0.2.0",
         "@types/numeric": "1.2.1",
         "@types/react": "17.0.0",
         "@types/react-dom": "17.0.0",
         "@types/react-helmet": "6.1.0",
         "@types/react-rangeslider": "2.2.3",
-        "@types/react-redux": "7.1.14",
-        "@types/react-router-dom": "5.1.6",
+        "@types/react-redux": "7.1.15",
+        "@types/react-router-dom": "5.1.7",
         "@types/snowpack-env": "2.3.3",
         "@types/styled-components": "5.1.7",
         "@visualdl/mock": "2.1.4",

frontend/packages/core/src/components/ChartCollapse.tsx

@@ -68,7 +68,7 @@ const CollapseIcon = styled(Icon)<{opened?: boolean}>`
 `;
 
 type ChartCollapseProps = {
-    title: string;
+    title: React.ReactNode;
     opened?: boolean;
     total?: number;
 };

frontend/packages/core/src/components/ChartPage.tsx

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import {ChartCollapseTitle as ChartCollapseTitleLoader, Chart as ChartLoader} from '~/components/Loader/ChartPage';
 import React, {FunctionComponent, PropsWithChildren, useCallback, useEffect, useMemo, useState} from 'react';
 import {Trans, useTranslation} from 'react-i18next';
-import {WithStyled, headerHeight, link, primaryColor, rem, transitionProps} from '~/utils/style';
+import {WithStyled, headerHeight, link, rem, transitionProps} from '~/utils/style';
 
-import BarLoader from 'react-spinners/BarLoader';
 import Chart from '~/components/Chart';
 import ChartCollapse from '~/components/ChartCollapse';
 import Pagination from '~/components/Pagination';
@@ -57,14 +57,6 @@ const Search = styled.div`
     margin-bottom: ${rem(16)};
 `;
 
-const Loading = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: ${rem(200)};
-    padding: ${rem(40)} 0;
-`;
-
 const Empty = styled.div<{height?: string}>`
     width: 100%;
     text-align: center;
@@ -94,7 +86,7 @@ export interface WithChart<T extends Item> {
 type ChartPageProps<T extends Item> = {
     items?: T[];
     running?: boolean;
-    loading?: boolean;
+    loading?: boolean | React.ReactNode;
     chartSize?: {
         width?: string;
         height?: string;
@@ -154,45 +146,90 @@ const ChartPage = <T extends Item>({
     const total = useMemo(() => Math.ceil(matchedTags.length / pageSize), [matchedTags]);
 
     const withCharts = useCallback(
-        (charts: T[], search?: boolean) =>
-            loading ? (
-                <Loading>
-                    <BarLoader color={primaryColor} width="20%" height="4px" />
-                </Loading>
-            ) : (
-                <Wrapper>
-                    {charts.length ? (
-                        charts.map((item, j) => {
-                            const cid = Symbol(item.label);
-                            return (
-                                <Chart
-                                    cid={cid}
-                                    key={item.id || item.label}
-                                    width={chartSize?.width ?? rem(430)}
-                                    height={chartSize?.height ?? rem(337)}
-                                >
-                                    {withChart?.({...item, cid}, j)}
-                                </Chart>
-                            );
-                        })
-                    ) : (
-                        <Empty height={rem(500)}>
-                            {search ? (
-                                <Trans i18nKey="common:search-empty">
-                                    Nothing found. Please try again with another word.
-                                    <br />
-                                    Or you can <a onClick={() => setInputValue('')}>see all charts</a>.
-                                </Trans>
-                            ) : (
-                                t('common:empty')
-                            )}
-                        </Empty>
-                    )}
-                </Wrapper>
-            ),
-        [withChart, loading, chartSize, t]
+        (charts: T[], search?: boolean) => (
+            <Wrapper>
+                {loading ? (
+                    Array.from({length: 2}).map((_, index) => (
+                        <Chart
+                            cid={Symbol()}
+                            key={index}
+                            width={chartSize?.width ?? rem(430)}
+                            height={chartSize?.height ?? rem(337)}
+                        >
+                            {loading === true ? <ChartLoader /> : loading}
+                        </Chart>
+                    ))
+                ) : charts.length ? (
+                    charts.map((item, j) => {
+                        const cid = Symbol(item.label);
+                        return (
+                            <Chart
+                                cid={cid}
+                                key={item.id || item.label}
+                                width={chartSize?.width ?? rem(430)}
+                                height={chartSize?.height ?? rem(337)}
+                            >
+                                {withChart?.({...item, cid}, j)}
+                            </Chart>
+                        );
+                    })
+                ) : (
+                    <Empty height={rem(500)}>
+                        {search ? (
+                            <Trans i18nKey="common:search-empty">
+                                Nothing found. Please try again with another word.
+                                <br />
+                                Or you can <a onClick={() => setInputValue('')}>see all charts</a>.
+                            </Trans>
+                        ) : (
+                            t('common:empty')
+                        )}
+                    </Empty>
+                )}
+            </Wrapper>
+        ),
+        [loading, t, chartSize?.width, chartSize?.height, withChart]
     );
 
+    const content = useMemo(() => {
+        if (loading) {
+            return Array.from({length: 3}).map((_, index) => (
+                <ChartCollapse key={index} title={<ChartCollapseTitleLoader />} opened={!index}>
+                    {withCharts([])}
+                </ChartCollapse>
+            ));
+        }
+        if (searchValue) {
+            return (
+                <ChartCollapse title={t('common:search-result')} total={matchedTags.length}>
+                    {withCharts(pageMatchedTags, true)}
+                    {pageMatchedTags.length ? <StyledPagination page={page} total={total} onChange={setPage} /> : null}
+                </ChartCollapse>
+            );
+        }
+        if (groupedItems.length) {
+            return groupedItems.map((groupedItem, i) => (
+                <ChartCollapse
+                    title={groupedItem[0]}
+                    key={groupedItem[0]}
+                    total={groupedItem[1].length}
+                    opened={i === 0}
+                >
+                    {withCharts(groupedItem[1])}
+                </ChartCollapse>
+            ));
+        }
+        return (
+            <Empty height={`calc(100vh - ${headerHeight} - ${rem(96)})`}>
+                <Trans i18nKey="common:unselected-empty">
+                    Nothing selected.
+                    <br />
+                    Please select display data from right side.
+                </Trans>
+            </Empty>
+        );
+    }, [groupedItems, loading, matchedTags.length, page, pageMatchedTags, searchValue, t, total, withCharts]);
+
     return (
         <div className={className}>
             <Search>
@@ -203,31 +240,7 @@ const ChartPage = <T extends Item>({
                     onChange={(value: string) => setInputValue(value)}
                 />
             </Search>
-            {searchValue ? (
-                <ChartCollapse title={t('common:search-result')} total={matchedTags.length}>
-                    {withCharts(pageMatchedTags, true)}
-                    {pageMatchedTags.length ? <StyledPagination page={page} total={total} onChange={setPage} /> : null}
-                </ChartCollapse>
-            ) : groupedItems.length ? (
-                groupedItems.map((groupedItem, i) => (
-                    <ChartCollapse
-                        title={groupedItem[0]}
-                        key={groupedItem[0]}
-                        total={groupedItem[1].length}
-                        opened={i === 0}
-                    >
-                        {withCharts(groupedItem[1])}
-                    </ChartCollapse>
-                ))
-            ) : (
-                <Empty height={`calc(100vh - ${headerHeight} - ${rem(96)})`}>
-                    <Trans i18nKey="common:unselected-empty">
-                        Nothing selected.
-                        <br />
-                        Please select display data from right side.
-                    </Trans>
-                </Empty>
-            )}
+            {content}
         </div>
     );
 };

frontend/packages/core/src/components/CurvesPage/CurveAside.tsx

@@ -22,6 +22,7 @@ import {AsideSection} from '~/components/Aside';
 import Field from '~/components/Field';
 import RunAside from '~/components/RunAside';
 import StepSlider from '~/components/CurvesPage/StepSlider';
+import StepSliderLoader from '~/components/Loader/curves/StepSlider';
 import TimeModeSelect from '~/components/TimeModeSelect';
 import {TimeType} from '~/resource/curves';
 import {cycleFetcher} from '~/utils/fetch';
@@ -139,28 +140,39 @@ const CurveAside: FunctionComponent<CurveAsideProps> = ({type, onChangeLoading,
         onToggleRunning(running);
     }, [onToggleRunning, running]);
 
-    return runs.length ? (
+    return (
         <RunAside
             runs={runs}
             selectedRuns={selectedRuns}
             onChangeRuns={onChangeRuns}
             running={running}
             onToggleRunning={setRunning}
+            loading={loading}
         >
             <AsideSection>
                 <Field label={t('curves:time-display-type')}>
                     <TimeModeSelect value={timeType} onChange={setTimeType} />
                 </Field>
             </AsideSection>
             <StepSliderWrapper>
-                {curveRun.map(run => (
-                    <AsideSection key={run.label}>
-                        <StepSlider run={run} type={timeType} onChange={index => onChangeIndexes(run.label, index)} />
+                {loading ? (
+                    <AsideSection>
+                        <StepSliderLoader />
                     </AsideSection>
-                ))}
+                ) : (
+                    curveRun.map(run => (
+                        <AsideSection key={run.label}>
+                            <StepSlider
+                                run={run}
+                                type={timeType}
+                                onChange={index => onChangeIndexes(run.label, index)}
+                            />
+                        </AsideSection>
+                    ))
+                )}
             </StepSliderWrapper>
         </RunAside>
-    ) : null;
+    );
 };
 
 export default CurveAside;