Fix generate open source page loading time

app/.prettierignore

@@ -3,4 +3,5 @@
 /.vscode
 /build
 /.idea
-/ios
+/ios
+/public/open_source_licenses.json

app/generate-open-source-page.js

@@ -1,26 +1,36 @@
-import pkg from 'nlf';
+import pkg from "nlf";
 import * as fs from "fs";
 
-pkg.find({directory: './', reach: 1}, function (err, data) {
-    let result = {};
-    data.forEach(d => {
-        d?.licenseSources.package.sources.forEach(ls => {
-            if (result[ls.license] === undefined) {
-                result[ls.license] = new Set;
-            }
-            result[ls.license].add(d?.name);
-        })
-    })
-    for (let ls in result) {
-        result[ls] = [...result[ls]];
-    }
-    fs.writeFile(
-        "public/open_source_licenses.json",
-        JSON.stringify(result, null, 4),
-        {flag: "w"},
-        function (err) {
-            if (err) {
-                return console.log(err);
-            }
-        });
+pkg.find({ directory: "./", reach: 1 }, function (err, data) {
+  let result = {};
+  data.forEach((d) => {
+    d?.licenseSources.package.sources.forEach((ls) => {
+      if (result[ls.license] === undefined) {
+        result[ls.license] = new Set();
+      }
+      result[ls.license].add(d?.name);
+    });
+  });
+  for (let ls in result) {
+    result[ls] = [...result[ls]];
+  }
+
+  let licenses = [];
+  for (const license in result) {
+    licenses.push({
+      name: license,
+      modules: result[license],
+    });
+  }
+
+  fs.writeFile(
+    "public/open_source_licenses.json",
+    JSON.stringify(licenses, null, 4),
+    { flag: "w" },
+    function (err) {
+      if (err) {
+        return console.log(err);
+      }
+    },
+  );
 });

app/src/api.ts

@@ -228,3 +228,14 @@ export function uploadImage(
     thumb: string;
   }>("/v2/image", image64, { params });
 }
+
+export interface OpenSourceLicense {
+  name: string;
+  modules: Array<string>;
+}
+
+export function getOpenSouceLicenses() {
+  return window.axios.get<OpenSourceLicense[]>("/open_source_licenses.json", {
+    baseURL: "",
+  });
+}

app/src/pages/OpenSource.tsx

@@ -4,27 +4,27 @@ import {
   IonContent,
   IonHeader,
   IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
   IonItem,
   IonItemDivider,
   IonItemGroup,
   IonList,
+  IonLoading,
   IonPage,
+  IonSkeletonText,
   IonText,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
 import { useTranslation } from "react-i18next";
 import OpenSourceLicenses from "../../public/open_source_licenses.json";
 import { openOutline } from "ionicons/icons";
-
-export interface OpenSourceLicense {
-  name: string;
-  modules: Array<string>;
-}
+import { useEffect, useMemo, useState } from "react";
+import { OpenSourceLicense, getOpenSouceLicenses } from "../api";
 
 function ReadLicenses(): Array<OpenSourceLicense> {
   let licenses: Array<OpenSourceLicense> = [];
-  console.log(OpenSourceLicenses);
   for (const license in OpenSourceLicenses) {
     licenses.push({
       name: license,
@@ -36,6 +36,45 @@ function ReadLicenses(): Array<OpenSourceLicense> {
 
 export default function OpenSource() {
   const { t } = useTranslation();
+  const [readLicenses, setReadLicenses] = useState<OpenSourceLicense[]>([]);
+  const [page, setPage] = useState(50);
+
+  useEffect(() => {
+    getOpenSouceLicenses().then((licenses) => {
+      setReadLicenses(licenses.data);
+    });
+  }, []);
+
+  const shownLicenses = useMemo(() => {
+    let result: OpenSourceLicense[] = [];
+    let licenseIndex = 0;
+    for (let j = 0; j < page; j++) {
+      let currentLicense = readLicenses[licenseIndex];
+      if (!currentLicense) break;
+      let moduleIndex = 0;
+      let shownModules: string[] = [];
+      while (j < page) {
+        let currentModule = currentLicense.modules[moduleIndex];
+        if (!currentModule) {
+          j++;
+          break;
+        }
+        shownModules.push(currentModule);
+
+        moduleIndex++;
+        j++;
+      }
+      result.push({
+        name: currentLicense.name,
+        modules: shownModules,
+      });
+
+      licenseIndex++;
+      j++;
+    }
+    return result;
+  }, [page, readLicenses]);
+
   return (
     <IonPage>
       <IonHeader translucent>
@@ -53,24 +92,45 @@ export default function OpenSource() {
           </IonToolbar>
         </IonHeader>
         <div>
-          <IonList>
-            {ReadLicenses().map((license) => (
-              <LicenseItem licenseItem={license} />
-            ))}
-          </IonList>
+          {shownLicenses.length ? (
+            <IonList>
+              {shownLicenses.map((license) => (
+                <LicenseItem licenseItem={license} key={license.name} />
+              ))}
+            </IonList>
+          ) : (
+            <IonList>
+              <IonItem>
+                <IonSkeletonText animated={true} style={{ width: "80px" }} />
+              </IonItem>
+            </IonList>
+          )}
+
+          <IonInfiniteScroll
+            onIonInfinite={(e) => {
+              console.log("run onInfiniteScroll");
+
+              setPage((s) => s + 200);
+              setTimeout(() => e.target.complete(), 300);
+            }}
+          >
+            <IonInfiniteScrollContent />
+          </IonInfiniteScroll>
         </div>
       </IonContent>
     </IonPage>
   );
 }
 
 function LicenseItem(props: { licenseItem: OpenSourceLicense }) {
+  let items = props.licenseItem.modules;
+
   return (
     <IonItemGroup>
       <IonItemDivider sticky>{props.licenseItem.name}</IonItemDivider>
 
-      {props.licenseItem.modules.map((module) => (
-        <IonItem>
+      {items.map((module) => (
+        <IonItem key={module}>
           {module}
           <a
             target="_blank"