[Front] Code Split & Skeleton (#85)

* Suspense

* Update .gitignore and project version, add loading skeleton to Gallery page

* Update image loading URL and optimize radio group component

.gitignore

@@ -1,5 +1,6 @@
 wwwroot
 public/*.jpg
+.idea
 
 ### Node template
 # Logs

SoarCraft.AwaiShop/SoarCraft.AwaiShop.csproj

@@ -19,7 +19,7 @@
     <NeutralLanguage>en-US</NeutralLanguage>
     <PackageProjectUrl>https://github.com/Aloento/AwaiShop</PackageProjectUrl>
 
-    <Version>1.1.0</Version>
+    <Version>1.2.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/Pages/Admin/index.tsx

@@ -9,7 +9,7 @@ import { AdminUser } from "./User";
  * @since 0.1.0
  * @version 0.1.0
  */
-export function Admin() {
+function Admin() {
   const { Paths } = useRouter();
   const path = Paths.at(1);
 
@@ -26,3 +26,6 @@ export function Admin() {
     }
   }, [path])
 }
+
+/** @deprecated */
+export default Admin;

src/Pages/Gallery.tsx

@@ -1,4 +1,4 @@
-import { Body1, Card, CardFooter, CardPreview, Link, Title3, makeStyles, tokens } from "@fluentui/react-components";
+import { Body1, Card, CardFooter, CardPreview, Link, Skeleton, SkeletonItem, Title3, makeStyles, tokens } from "@fluentui/react-components";
 import { useRequest } from "ahooks";
 import { random } from "lodash-es";
 import { GuidImage } from "~/Helpers/GuidImage";
@@ -50,14 +50,22 @@ const log1 = new Logger("Gallery");
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.3
+ * @version 0.2.0
  */
-export function Gallery() {
+function Gallery() {
   const style = useStyles();
-  const { data } = useRequest(() => Hub.Gallery.Get.Categories(), {
+  const { data, loading } = useRequest(() => Hub.Gallery.Get.Categories(), {
     onError: log1.error
   });
 
+  if (loading)
+    return (
+      <Skeleton className={style.main}>
+        <SkeletonItem appearance="translucent" size={32} />
+        <SkeletonItem size={128} />
+      </Skeleton>
+    );
+
   return (
     <div className={style.main}>
       {
@@ -123,3 +131,6 @@ function GalleryCard({ Id }: { Id: number }) {
     </Card>
   )
 }
+
+/** @deprecated */
+export default Gallery;

src/Pages/History/index.tsx

@@ -26,7 +26,7 @@ const log = new Logger("History");
  * @since 0.1.0
  * @version 0.2.0
  */
-export function History() {
+function History() {
   const { data } = useRequest(() => Hub.Order.Get.List(log), {
     onError: log.error
   });
@@ -35,3 +35,6 @@ export function History() {
     <DelegateDataGrid Items={data || []} Columns={useConst(() => HistoryColumns(log))} />
   )
 }
+
+/** @deprecated */
+export default History;

src/Pages/Product/Carousel.tsx

@@ -19,7 +19,7 @@ const useStyle = makeStyles({
   },
 });
 
-const img = "https://placehold.co/400?text=Loading...";
+const img = "https://placehold.co/1000?text=Loading...";
 
 const log = new Logger("Product", "Carousel");
 

src/Pages/Product/RadioGroup.tsx

@@ -1,6 +1,6 @@
-import { Title3, ToggleButton, makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { SkeletonItem, Title3, ToggleButton, makeStyles, shorthands, tokens } from "@fluentui/react-components";
 import { useRequest } from "ahooks";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Logger } from "~/Helpers/Logger";
 import { ColFlex, Flex } from "~/Helpers/Styles";
 import { Hub } from "~/ShopNet";
@@ -34,34 +34,34 @@ const log = new Logger("Product", "RadioGroup");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.3.0
+ * @version 0.4.0
  */
 export function ProductRadioList({ ProdId }: { ProdId: number }) {
-  const { data } = useRequest(() => Hub.Product.Get.Combo(ProdId, log), {
-    onError: log.error
-  });
-
   const { Update } = useRadioGroup();
   const [variants, setVariants] = useState<Record<string, Set<string>>>({});
 
-  useEffect(() => {
-    if (!data) return;
+  const { loading } = useRequest(() => Hub.Product.Get.Combo(ProdId, log), {
+    onError: log.error,
+    onSuccess(data) {
+      const variant: Record<string, Set<string>> = {};
+      const cur: Record<string, string> = {};
 
-    const variant: Record<string, Set<string>> = {};
-    const cur: Record<string, string> = {};
+      for (const i of data)
+        for (const [vari, type] of Object.entries(i.Combo))
+          if (variant.hasOwnProperty(vari))
+            variant[vari].add(type);
+          else {
+            variant[vari] = new Set([type]);
+            cur[vari] = type;
+          }
 
-    for (const i of data)
-      for (const [vari, type] of Object.entries(i.Combo))
-        if (variant.hasOwnProperty(vari))
-          variant[vari].add(type);
-        else {
-          variant[vari] = new Set([type]);
-          cur[vari] = type;
-        }
+      Update(cur);
+      setVariants(variant);
+    }
+  });
 
-    Update(cur);
-    setVariants(variant);
-  }, [data]);
+  if (loading)
+    return <SkeletonItem size={72} />;
 
   return Object.keys(variants).map((val, i) => <VariRadioGroup key={i} Variant={val} Types={variants[val]} />);
 }

src/Pages/Product/index.tsx

@@ -67,7 +67,7 @@ const log = new Logger("Product");
  * @since 0.1.0
  * @version 0.1.5
  */
-export function Product() {
+function Product() {
   const style = useStyle();
   const { Nav, Paths } = useRouter();
   const id = parseInt(Paths.at(1)!);
@@ -131,3 +131,6 @@ export function Product() {
     </RadioGroupContext>
   )
 }
+
+/** @deprecated */
+export default Product;

src/Pages/index.tsx

@@ -1,11 +1,7 @@
 import { Spinner, makeStyles, tokens } from "@fluentui/react-components";
-import { useMemo } from "react";
+import { Suspense, lazy, useMemo } from "react";
 import { NewUser } from "~/Components/NewUser";
 import { ColFlex, NavH, NavW } from "~/Helpers/Styles";
-import { Admin } from "~/Pages/Admin";
-import { Gallery } from "~/Pages/Gallery";
-import { History } from "~/Pages/History";
-import { Product } from "~/Pages/Product";
 import { Footer } from "../Components/Footer";
 import { useRouter } from "../Components/Router";
 import { TopNavBar } from "../Components/TopNavBar";
@@ -80,7 +76,9 @@ export function Layout() {
 
     <div className={style.body}>
       <main className={style.content}>
-        {match}
+        <Suspense fallback={<Spinner />}>
+          {match}
+        </Suspense>
       </main>
 
       <Footer />
@@ -89,3 +87,11 @@ export function Layout() {
     <NewUser />
   </>
 }
+
+const Product = lazy(() => import("~/Pages/Product"));
+
+const Admin = lazy(() => import("~/Pages/Admin"));
+
+const History = lazy(() => import("~/Pages/History"));
+
+const Gallery = lazy(() => import("~/Pages/Gallery"));