refactor(web): improve loading experience by reduce flashing (#1511)

netless-io · May 9, 2022 · bd44f96 · bd44f96
1 parent 97f8324
commit bd44f96
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 59 deletions.
diff --git a/packages/flat-components/src/containers/CloudStorageContainer/index.tsx b/packages/flat-components/src/containers/CloudStorageContainer/index.tsx
@@ -56,9 +56,16 @@ export const CloudStorageContainer = observer<CloudStorageContainerProps>(
     function CloudStorageContainer({ store }) {
         const { t } = useTranslation();
         const cloudStorageContainerRef = useRef<HTMLDivElement>(null);
+        const [skeletonsVisible, setSkeletonsVisible] = useState(false);
         const [isH5PanelVisible, setH5PanelVisible] = useState(false);
         const [isAtTheBottom, setIsAtTheBottom] = useState(false);
 
+        // Wait 200ms before showing skeletons to reduce flashing.
+        useEffect(() => {
+            const ticket = window.setTimeout(() => setSkeletonsVisible(true), 200);
+            return () => window.clearTimeout(ticket);
+        }, []);
+
         useEffect(() => {
             if (isAtTheBottom) {
                 void store.fetchMoreCloudStorageData(store.cloudStorageDataPagination + 1);
@@ -147,9 +154,9 @@ export const CloudStorageContainer = observer<CloudStorageContainerProps>(
                             isLoadingData={store.isFetchingFiles}
                             store={store}
                         />
-                    ) : (
+                    ) : skeletonsVisible ? (
                         <CloudStorageSkeletons isCompactMode={store.compact} />
-                    )}
+                    ) : null}
                 </div>
                 <CSSTransition
                     mountOnEnter

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/web/flat-web/src/AppRoutes/AppRouteContainer.tsx b/web/flat-web/src/AppRoutes/AppRouteContainer.tsx
@@ -17,6 +17,19 @@ export interface AppRouteContainerProps {
     routeProps: RouteComponentProps;
 }
 
+const componentCache = new Map<RouteNameType, ComponentType<any>>();
+// Preload components every 2 seconds.
+const preloadComponents = async (): Promise<void> => {
+    for (const name of Object.keys(routePages) as RouteNameType[]) {
+        if (!componentCache.has(name)) {
+            const { default: Component } = await routePages[name].component();
+            componentCache.set(name, Component);
+            await new Promise(resolve => setTimeout(resolve, 2000));
+        }
+    }
+};
+window.setTimeout(preloadComponents, 5000);
+
 export const AppRouteContainer = observer<AppRouteContainerProps>(function AppRouteContainer({
     name,
     Comp,
@@ -38,14 +51,25 @@ export const AppRouteContainer = observer<AppRouteContainerProps>(function AppRo
         window.getSelection()?.removeAllRanges();
     }, [t, title]);
 
+    useEffect(() => {
+        if (!componentCache.has(name)) {
+            Comp().then(({ default: Component }) => {
+                componentCache.set(name, Component);
+            });
+        }
+    }, [Comp, name]);
+
     const hasHeader = pageStore.name && routePages[pageStore.name].hasHeader;
 
     return (
         <FlatThemeBodyProvider prefersColorScheme={configStore.prefersColorScheme}>
             <AppRouteErrorBoundary
-                Comp={loadable(Comp, {
-                    fallback: <LoadingPage hasHeader={hasHeader} />,
-                })}
+                Comp={
+                    componentCache.get(name) ||
+                    loadable(Comp, {
+                        fallback: <LoadingPage hasHeader={hasHeader} />,
+                    })
+                }
                 {...{ title, routeProps }}
             />
         </FlatThemeBodyProvider>