Merge pull request #2 from mceck/feature/lazy-load-lists

Feature/lazy load lists

CHANGELOG.md

@@ -8,8 +8,16 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ### TODO
 
+- refactor caching
+- refactor ui
 - drag and drop
 
+## [1.4.2]
+
+### Added
+
+- lazy load big workspaces lists
+
 ## [1.4.1]
 
 ### Changed

web/components/commons/list-selector/ListSelector.svelte

@@ -24,34 +24,32 @@
   let showSelector = false;
   let selected = -1;
 
-  $: filteredSpaces = $spacesTree.spaces
-    .map((s) => {
-      if (!searchText) {
-        return s;
-      }
-      const ret = { ...s };
-      ret.folders =
-        ret.folders
-          ?.map((f) => {
-            const fret = { ...f };
-            fret.lists =
-              fret.lists?.filter((l) =>
-                l.name.toLowerCase().includes(searchText.toLowerCase())
-              ) ?? [];
-            return fret;
-          })
-          ?.filter(
-            (f) =>
-              f.lists?.length ||
-              f.name.toLowerCase().includes(searchText.toLowerCase())
-          ) ?? [];
-      ret.lists =
-        ret.lists?.filter((l) =>
-          l.name.toLowerCase().includes(searchText.toLowerCase())
+  $: filteredSpaces = $spacesTree.spaces.map((s) => {
+    if (!searchText) {
+      return s;
+    }
+    const ret = { ...s };
+    ret.folders =
+      ret.folders
+        ?.map((f) => {
+          const fret = { ...f };
+          fret.lists =
+            fret.lists?.filter((l) =>
+              l.name.toLowerCase().includes(searchText.toLowerCase())
+            ) ?? [];
+          return fret;
+        })
+        ?.filter(
+          (f) =>
+            f.lists?.length ||
+            f.name.toLowerCase().includes(searchText.toLowerCase())
         ) ?? [];
-      return ret;
-    })
-    .filter((s) => s.lists?.length || s.folders?.length);
+    ret.lists =
+      ret.lists?.filter((l) =>
+        l.name.toLowerCase().includes(searchText.toLowerCase())
+      ) ?? [];
+    return ret;
+  });
 
   function handleSearching() {
     if (searchText) {
@@ -187,7 +185,17 @@
     return undefined;
   }
 
-  function toggleSpace(spaceId: string) {
+  async function toggleSpace(spaceId: string) {
+    const space = $spacesTree.spaces.find((s) => s.id === spaceId);
+    if (!space.folders?.length && !space.lists?.length) {
+      const [{ data: folders }, { data: lists }] = await Promise.all([
+        clickupService.getFolders(space.id),
+        clickupService.getFolderlessLists(space.id),
+      ]);
+      space.folders = folders ?? [];
+      space.lists = lists ?? [];
+      clickupService.setCache('spaces', $spacesTree);
+    }
     showSpaces = { ...showSpaces, [spaceId]: !showSpaces[spaceId] };
     searchText = '';
   }
@@ -255,10 +263,10 @@
           ? `${selectedView.list?.name}: ${selectedView.name}`
           : 'Select view...'
         : selectedLists.length
-        ? `(${selectedLists.length} list${
-            selectedLists.length > 1 ? 's' : ''
-          } selected)`
-        : 'Select lists...'}
+          ? `(${selectedLists.length} list${
+              selectedLists.length > 1 ? 's' : ''
+            } selected)`
+          : 'Select lists...'}
     />
     {#if showSelector}
       <div

web/services/clickup-service.ts

@@ -172,9 +172,15 @@ class ClickupService {
     const spacesTree: SpacesTree = { spaces: [] };
     const { data: spaces } = await this.getSpaces();
     const promises: Promise<any>[] = [];
+
     spaces.forEach((space) => {
-      promises.push(this.getFolders(space.id));
-      promises.push(this.getFolderlessLists(space.id));
+      if (spaces.length <= 10) {
+        promises.push(this.getFolders(space.id));
+        promises.push(this.getFolderlessLists(space.id));
+      } else {
+        space.folders = [];
+        space.lists = [];
+      }
       spacesTree.spaces.push(space);
     });
     const results = await Promise.all(promises);

yarn.lock

@@ -2314,10 +2314,10 @@ nanoid@3.3.3:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
   integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
 
-nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 napi-build-utils@^1.0.1:
   version "1.0.2"
@@ -2575,13 +2575,13 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@^8.4.18, postcss@^8.4.21:
-  version "8.4.21"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
-  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  version "8.4.38"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
+  integrity "sha1-s4fVM7ryBUKI4zcGbYHGvunbng4= sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A=="
   dependencies:
-    nanoid "^3.3.4"
+    nanoid "^3.3.7"
     picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.0"
 
 prebuild-install@^7.0.1:
   version "7.1.1"
@@ -2971,10 +2971,10 @@ sorcery@^0.10.0:
     sander "^0.5.0"
     sourcemap-codec "^1.3.0"
 
-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity "sha1-FrgJwWJRe1uMPn3NMVoqXCYSsq8= sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
 
 source-map-support@~0.5.20:
   version "0.5.21"