feat: add lazy loading app, readme

2025-02-21 16:52:01 +00:00 · 2022-07-19 23:08:16 +05:30 · 2022-07-19 23:08:16 +05:30 · fd20917409
commit fd20917409
parent 9e14ce8d6b
6 changed files with 57 additions and 88 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,19 @@
+# Okiba
+
+This repository contains okiba bin's front-end code. The web app is using codemirror editor, react library with vite bundler.
+
+## Usage
+
+```shell
+// get deps
+$ pnpm install
+
+// build
+$ pnpm run build
+
+// dev server
+$ pnpm run dev
+
+// preview
+$ pnpm run preview
+```
--- a/favicon.svg
+++ b/favicon.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+    <path fill="#D9F8C4"
+        d="M 233.5 36.7 C 247.4 31.7 262.6 31.7 276.5 36.7 L 468.5 105.3 C 493.1 114.4 511 138.5 511 165.6 V 408.4 C 511 435.5 493.1 459.6 468.5 468.7 L 276.5 537.3 C 262.6 542.3 247.4 542.3 233.5 537.3 L 41.5 468.7 C 16 459.6 -1 435.5 -1 408.4 V 165.6 C -1 138.5 16 114.4 41.5 105.3 L 233.5 36.7 z M 255 97 L 81.3 159 L 255 221 L 428.7 159 L 255 97 z M 287 465.6 L 447 408.4 V 220.4 L 287 277.6 V 465.6 z" />
+</svg>
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/src/favicon.png" />
+    <link rel="icon" type="image/svg" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Okiba</title>
  </head>
--- a/package.json
+++ b/package.json
@ -1,27 +1,27 @@
 {
-  "name": "okiba-f",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@codemirror/view": "^6.0.3",
-    "@lezer/highlight": "^1.0.0",
-    "@uiw/codemirror-themes": "^4.11.4",
-    "@uiw/react-codemirror": "^4.11.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-router-dom": "^6.3.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^1.3.0",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.9"
-  }
-}
+	"name": "okiba-f",
+	"private": true,
+	"version": "0.0.0",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@codemirror/view": "^6.0.3",
+		"@lezer/highlight": "^1.0.0",
+		"@uiw/codemirror-themes": "^4.11.4",
+		"@uiw/react-codemirror": "^4.11.4",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0",
+		"react-router-dom": "^6.3.0"
+	},
+	"devDependencies": {
+		"@types/react": "^18.0.0",
+		"@types/react-dom": "^18.0.0",
+		"@types/react-router-dom": "^5.3.3",
+		"@vitejs/plugin-react": "^1.3.0",
+		"typescript": "^4.6.3",
+		"vite": "^2.9.9"
+	}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -9,7 +9,6 @@ specifiers:
  '@uiw/codemirror-themes': ^4.11.4
  '@uiw/react-codemirror': ^4.11.4
  '@vitejs/plugin-react': ^1.3.0
-  axios: ^0.27.2
  react: ^18.0.0
  react-dom: ^18.0.0
  react-router-dom: ^6.3.0
@ -21,7 +20,6 @@ dependencies:
  '@lezer/highlight': 1.0.0
  '@uiw/codemirror-themes': 4.11.4
  '@uiw/react-codemirror': 4.11.4_zkjxn7zmjazops4ey5en2fchna
-  axios: 0.27.2
  react: 18.2.0
  react-dom: 18.2.0_react@18.2.0
  react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
@ -532,19 +530,6 @@ packages:
      color-convert: 1.9.3
    dev: true

-  /asynckit/0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: false
-
-  /axios/0.27.2:
-    resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
-    dependencies:
-      follow-redirects: 1.15.1
-      form-data: 4.0.0
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
  /browserslist/4.21.1:
    resolution: {integrity: sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==}
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@ -591,13 +576,6 @@ packages:
    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
    dev: true

-  /combined-stream/1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
-    dependencies:
-      delayed-stream: 1.0.0
-    dev: false
-
  /convert-source-map/1.8.0:
    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
    dependencies:
@ -624,11 +602,6 @@ packages:
      ms: 2.1.2
    dev: true

-  /delayed-stream/1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
-    dev: false
-
  /electron-to-chromium/1.4.187:
    resolution: {integrity: sha512-t3iFLHVIMhB8jGZ+8ui951nz6Bna5qKfhxezG3wzXdBJ79qFKPsE2chjjVFNqC1ewhfrPQrw9pmVeo4FFpZeQA==}
    dev: true
@ -855,25 +828,6 @@ packages:
    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
    dev: true

-  /follow-redirects/1.15.1:
-    resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
-  /form-data/4.0.0:
-    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
-    engines: {node: '>= 6'}
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      mime-types: 2.1.35
-    dev: false
-
  /fsevents/2.3.2:
    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@ -942,18 +896,6 @@ packages:
      js-tokens: 4.0.0
    dev: false

-  /mime-db/1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-    dev: false
-
-  /mime-types/2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-    dependencies:
-      mime-db: 1.52.0
-    dev: false
-
  /ms/2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
    dev: true
--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,10 +1,13 @@
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
 import "./index.css";

+const LazyApp = React.lazy(() => import("./App"));
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
-		<App />
+		<Suspense fallback={"Loading..."}>
+			<LazyApp />
+		</Suspense>
 	</React.StrictMode>,
 );