🚀 perf: add import sorting order + lazy components

.eslintrc.cjs

@@ -10,19 +10,6 @@ module.exports = {
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh', 'prettier'],
-  rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: false,
-        semi: true,
-        printWidth: 80,
-      },
-    ],
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
+  plugins: ['react-refresh'],
+  rules: { 'prettier/prettier': 1},
 }

.prettierrc

@@ -0,0 +1,20 @@
+{
+    "bracketSpacing": true,
+    "jsonRecursiveSort": true,
+    "importOrder": [
+      "<THIRD_PARTY_MODULES>",
+      "^@material-ui/(.*)$",
+      "src",
+      "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true,
+    "plugins": [
+      "prettier-plugin-sort-json",
+      "@trivago/prettier-plugin-sort-imports"
+    ], 
+    "semi": true,
+    "singleQuote": false,
+    "printWidth": 80,
+    "trailingComma": "all"
+  }

package.json

@@ -27,6 +27,7 @@
     "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
@@ -42,6 +43,7 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
+    "prettier-plugin-sort-json": "^3.1.0",
     "react-icons": "^4.12.0",
     "tailwindcss": "^3.3.7",
     "typescript": "^5.3.3",

src/components/App.tsx

@@ -1,7 +1,8 @@
-import { Routes, Route } from "react-router-dom";
-import Layout from "./Layout";
+import { Route, Routes } from "react-router-dom";
+
 import Collection from "./Collection";
 import Creation from "./Creation";
+import Layout from "./Layout";
 import Select from "./Select";
 import Start from "./Start";
 

src/components/Collection.tsx

@@ -1,12 +1,13 @@
-import { useState } from "react";
-import { Masonry } from "react-plock";
-import Viewer from "@samvera/clover-iiif/viewer";
-
+// import Viewer from "@samvera/clover-iiif/viewer";
 // @ts-ignore
-import { Block, Button, Card, Page, Navbar, Link, Popup } from "konsta/react";
+import { Block, Button, Card, Link, Navbar, Page, Popup } from "konsta/react";
+import { Suspense, lazy, useState } from "react";
+import { Masonry } from "react-plock";
 
-import utils from "../utils";
 import useStore, { Image } from "../store";
+import utils from "../utils";
+
+const Viewer = lazy(() => import("@samvera/clover-iiif/viewer"));
 
 const options = {
   canvasBackgroundColor: "010A01",
@@ -101,7 +102,9 @@ function Collection() {
               }
             />
             <Block className="space-y-4">
-              <Viewer iiifContent={selectedImage.url} options={options} />
+              <Suspense fallback={<h2>🌀 Loading...</h2>}>
+                <Viewer iiifContent={selectedImage.url} options={options} />
+              </Suspense>
               <Button
                 className="px-4 py-2 rounded-full mr-2"
                 onClick={() =>

src/components/Layout.tsx

@@ -1,12 +1,12 @@
-import { NavLink, Outlet, useMatch, useResolvedPath } from "react-router-dom";
 // @ts-ignore
 import { App, Icon, Page, Tabbar, TabbarLink } from "konsta/react";
 import {
-  MdOutlineDoorFront,
   MdFavoriteBorder,
-  MdOutlineCollections,
   MdOutlineAssignmentInd,
+  MdOutlineCollections,
+  MdOutlineDoorFront,
 } from "react-icons/md";
+import { NavLink, Outlet, useMatch, useResolvedPath } from "react-router-dom";
 
 function Layout() {
   return (

src/components/Select.tsx

@@ -1,13 +1,13 @@
-import { useState, useRef, useEffect, useCallback } from "react";
 import axios from "axios";
-import TinderCard from "react-tinder-card";
 // @ts-ignore
-import { Card, Button, Icon } from "konsta/react";
+import { Button, Card, Icon } from "konsta/react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { MdOutlineThumbDown, MdOutlineThumbUp } from "react-icons/md";
+import TinderCard from "react-tinder-card";
 
 import api from "../api";
-import utils from "../utils";
 import useStore, { Image } from "../store";
+import utils from "../utils";
 
 export interface Element {
   artworkLabel: { value: string };

src/components/Start.tsx

@@ -1,7 +1,8 @@
 // @ts-ignore
 import { Block } from "konsta/react";
-import LogoIcon from "/logo_animated.svg";
+
 import CollageIcon from "/collage.webp";
+import LogoIcon from "/logo_animated.svg";
 
 const Logo = () => {
   return <img src={LogoIcon} alt="Logo GLAMorous Europe" className="w-160" />;

src/main.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+
 import App from "./components/App.tsx";
 import "./index.css";
 

src/utils.tsx

@@ -1,11 +1,11 @@
-import removeBackground, { Config } from "@imgly/background-removal";
+/* import removeBackground, { Config } from "@imgly/background-removal";
 
 const config: Config = {
   model: "small",
   progress: (key: unknown, current: unknown, total: unknown) => {
     console.log(`Downloading ${key}: ${current} of ${total}`);
   },
-};
+}; */
 
 async function fetchIIIFIdentifier(
   iiifManifest: string,
@@ -186,7 +186,7 @@ function getImageSelectionData(
 }
 
 export default {
-  bgRemoval: async (path: string) => {
+  /*   bgRemoval: async (path: string) => {
     const startTime = Date.now();
     try {
       const blob: Blob = await removeBackground(path, config);
@@ -199,7 +199,7 @@ export default {
       console.error(error);
       throw error;
     }
-  },
+  }, */
   fetchIIIFIdentifier: async (iiifManifest: string) => {
     try {
       return await fetchIIIFIdentifier(iiifManifest);