Optimise token database sync and add loading indicator for multiple token hiding

src/components/map/MapTiles.js

@@ -20,9 +20,12 @@ function MapTiles({ mapsById, onMapEdit, onMapSelect, subgroup }) {
   function renderTile(group) {
     if (group.type === "item") {
       const map = mapsById[group.id];
+      if (map) {
         const isSelected = selectedGroupIds.includes(group.id);
         const canEdit =
-        isSelected && selectMode === "single" && selectedGroupIds.length === 1;
+          isSelected &&
+          selectMode === "single" &&
+          selectedGroupIds.length === 1;
         return (
           <MapTile
             key={map.id}
@@ -35,6 +38,7 @@ function MapTiles({ mapsById, onMapEdit, onMapSelect, subgroup }) {
             badges={[`${map.grid.size.x}x${map.grid.size.y}`]}
           />
         );
+      }
     } else {
       const isSelected = selectedGroupIds.includes(group.id);
       const items = getGroupItems(group);

src/components/token/TokenEditBar.js

@@ -48,8 +48,15 @@ function TokenEditBar({ disabled, onLoad }) {
   async function handleTokensHide(hideInSidebar) {
     const selectedTokens = getSelectedTokens();
     const selectedTokenIds = selectedTokens.map((token) => token.id);
+    // Show loading indicator if hiding more than 10 tokens
+    if (selectedTokenIds.length > 10) {
+      onLoad(true);
+      await updateTokensHidden(selectedTokenIds, hideInSidebar);
+      onLoad(false);
+    } else {
       updateTokensHidden(selectedTokenIds, hideInSidebar);
     }
+  }
 
   /**
    * Shortcuts

src/components/token/TokenTiles.js

@@ -21,9 +21,12 @@ function TokenTiles({ tokensById, onTokenEdit, subgroup }) {
   function renderTile(group) {
     if (group.type === "item") {
       const token = tokensById[group.id];
+      if (token) {
         const isSelected = selectedGroupIds.includes(group.id);
         const canEdit =
-        isSelected && selectMode === "single" && selectedGroupIds.length === 1;
+          isSelected &&
+          selectMode === "single" &&
+          selectedGroupIds.length === 1;
 
         return (
           <TokenTile
@@ -39,6 +42,7 @@ function TokenTiles({ tokensById, onTokenEdit, subgroup }) {
             ]}
           />
         );
+      }
     } else {
       const isSelected = selectedGroupIds.includes(group.id);
       const items = getGroupItems(group);

src/contexts/TokenDataContext.js

@@ -115,30 +115,24 @@ export function TokenDataProvider({ children }) {
     }
 
     function handleTokenChanges(changes) {
+      // Pool token changes together to call a single state update at the end
+      let tokensCreated = [];
+      let tokensUpdated = {};
+      let tokensDeleted = [];
       for (let change of changes) {
         if (change.table === "tokens") {
           if (change.type === 1) {
             // Created
             const token = change.obj;
-            setTokens((prevTokens) => [token, ...prevTokens]);
+            tokensCreated.push(token);
           } else if (change.type === 2) {
             // Updated
             const token = change.obj;
-            setTokens((prevTokens) => {
+            tokensUpdated[token.id] = token;
-              const newTokens = [...prevTokens];
-              const i = newTokens.findIndex((t) => t.id === token.id);
-              if (i > -1) {
-                newTokens[i] = token;
-              }
-              return newTokens;
-            });
           } else if (change.type === 3) {
             // Deleted
             const id = change.key;
-            setTokens((prevTokens) => {
+            tokensDeleted.push(id);
-              const filtered = prevTokens.filter((token) => token.id !== id);
-              return filtered;
-            });
           }
         }
         if (change.table === "groups") {
@@ -149,6 +143,23 @@ export function TokenDataProvider({ children }) {
           }
         }
       }
+      const tokensUpdatedArray = Object.values(tokensUpdated);
+      if (
+        tokensCreated.length > 0 ||
+        tokensUpdatedArray.length > 0 ||
+        tokensDeleted.length > 0
+      ) {
+        setTokens((prevTokens) => {
+          let newTokens = [...tokensCreated, ...prevTokens];
+          for (let token of tokensUpdatedArray) {
+            const tokenIndex = newTokens.findIndex((t) => t.id === token.id);
+            if (tokenIndex > -1) {
+              newTokens[tokenIndex] = token;
+            }
+          }
+          return newTokens.filter((token) => !tokensDeleted.includes(token.id));
+        });
+      }
     }
 
     database.on("changes", handleTokenChanges);