refactor: Add page skeleton screen to optimize experience.

Signed-off-by: The1111mp <[email protected]>

src/renderer/pages/versions/index.tsx

@@ -1,8 +1,17 @@
 import './styles.scss';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useLoaderData } from 'react-router-dom';
-import { App, Button, Dropdown, Space, Typography, Tag, Tooltip } from 'antd';
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { Await, defer, useAsyncValue, useLoaderData } from 'react-router-dom';
+import {
+  App,
+  Button,
+  Dropdown,
+  Space,
+  Typography,
+  Tag,
+  Tooltip,
+  Skeleton,
+} from 'antd';
 import {
   SyncOutlined,
   ReloadOutlined,
@@ -21,6 +30,7 @@ import { checkSupportive, compareVersion } from 'renderer/util';
 
 import type { ColumnsType } from 'antd/es/table';
 import type { Ref as InfoRef } from './modal';
+import { resolve } from 'node:path';
 
 type VersionsResult = [Nvmd.Versions, Array<string>, string];
 
@@ -29,25 +39,49 @@ dayjs.extend(localizedFormat);
 
 const { Title } = Typography;
 
-export async function loader(): Promise<VersionsResult> {
-  try {
-    const versions = await Promise.all([
-      window.Context.getAllNodeVersions(),
-      window.Context.getInstalledNodeVersions(),
-      window.Context.getCurrentVersion(),
-    ]);
-
-    return versions;
-  } catch (err) {
-    return [[], [], ''];
-  }
+export async function loader() {
+  const versions = Promise.all([
+    window.Context.getAllNodeVersions(),
+    window.Context.getInstalledNodeVersions(),
+    window.Context.getCurrentVersion(),
+  ]);
+
+  return defer({ versions: versions });
 }
 
-export const Versions: React.FC = () => {
-  const [allVersions, allInstalledVersions, currentVersion] =
-    useLoaderData() as VersionsResult;
+export function VersionsRoute() {
+  const data = useLoaderData() as { versions: VersionsResult };
+
+  return (
+    <Suspense
+      fallback={
+        <div className="module-versions-content">
+          <Space style={{ width: '100%', justifyContent: 'space-between' }}>
+            <Skeleton.Input active size="small" />
+            <Space>
+              <Skeleton.Input active size="small" />
+              <Skeleton.Input active size="small" />
+            </Space>
+          </Space>
+          <Skeleton active paragraph={{ rows: 4 }} />
+        </div>
+      }
+    >
+      <Await resolve={data.versions}>
+        <Versions />
+      </Await>
+    </Suspense>
+  );
+}
+
+const Versions: React.FC = () => {
+  const versionsData = useAsyncValue() as VersionsResult;
+
+  console.log(versionsData);
+
+  const [allVersions, allInstalledVersions, currentVersion] = versionsData;
 
-  const { version: latest } = allVersions[0];
+  const { version: latest } = allVersions[0] || { version: '' };
 
   const [current, setCurrent] = useState<string>(() => currentVersion);
   const [versions, setVersions] = useState<Nvmd.Versions>(() => allVersions);

src/renderer/pages/versions/styles.scss

@@ -1,6 +1,10 @@
 .module-versions {
   padding: 16px 32px;
 
+  &-content {
+    padding: 16px 32px;
+  }
+
   &-header {
     margin-bottom: 12px;
     display: flex;

src/renderer/routes.tsx

@@ -1,7 +1,7 @@
 import { createMemoryRouter } from 'react-router-dom';
 
 import Home from './pages/home';
-import { Versions, loader as VersionsLoader } from './pages/versions';
+import { VersionsRoute, loader as VersionsLoader } from './pages/versions';
 
 import type { RouteObject } from 'react-router-dom';
 
@@ -13,7 +13,7 @@ const routes: RouteObject[] = [
       {
         path: 'all',
         loader: VersionsLoader,
-        element: <Versions />,
+        element: <VersionsRoute />,
       },
       {
         path: 'installed',
@@ -28,5 +28,5 @@ const routes: RouteObject[] = [
 ];
 
 export const router = createMemoryRouter(routes, {
-  initialEntries: ['/', '/all'],
+  initialEntries: ['/all'],
 });