Update maps and tokens to have thumbnails and removed loading of all files on load

src/modals/SelectTokensModal.js

@@ -14,6 +14,7 @@ import LoadingOverlay from "../components/LoadingOverlay";
 
 import blobToBuffer from "../helpers/blobToBuffer";
 import { useSearch, useGroup, handleItemSelect } from "../helpers/select";
+import { createThumbnail } from "../helpers/image";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
@@ -21,6 +22,9 @@ import { useTokenData } from "../contexts/TokenDataContext";
 import { useAuth } from "../contexts/AuthContext";
 import { useKeyboard } from "../contexts/KeyboardContext";
 
+// 300 pixels total
+const thumbnailResolution = { size: 300, quality: 0.5 };
+
 function SelectTokensModal({ isOpen, onRequestClose }) {
   const { userId } = useAuth();
   const {
@@ -47,8 +51,10 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
   const [isGroupModalOpen, setIsGroupModalOpen] = useState(false);
 
   async function handleTokensGroup(group) {
+    setIsLoading(true);
     setIsGroupModalOpen(false);
     await updateTokens(selectedTokenIds, { group });
+    setIsLoading(false);
   }
 
   const [tokensByGroup, tokenGroups] = useGroup(
@@ -63,7 +69,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
    */
 
   const fileInputRef = useRef();
-  const [imageLoading, setImageLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   function openImageDialog() {
     if (fileInputRef.current) {
@@ -100,7 +106,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
       name = Case.capital(name);
     }
     let image = new Image();
-    setImageLoading(true);
+    setIsLoading(true);
     const buffer = await blobToBuffer(file);
 
     // Copy file to avoid permissions issues
@@ -109,9 +115,12 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     const url = URL.createObjectURL(blob);
 
     return new Promise((resolve, reject) => {
-      image.onload = function () {
+      image.onload = async function () {
+        const thumbnail = await createThumbnail(image, file.type);
+
         handleTokenAdd({
           file: buffer,
+          thumbnail,
           name,
           id: shortid.generate(),
           type: "file",
@@ -126,7 +135,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
           width: image.width,
           height: image.height,
         });
-        setImageLoading(false);
+        setIsLoading(false);
         resolve();
       };
       image.onerror = reject;
@@ -268,18 +277,18 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
           />
           <Button
             variant="primary"
-            disabled={imageLoading}
+            disabled={isLoading}
             onClick={onRequestClose}
           >
             Done
           </Button>
         </Flex>
       </ImageDrop>
-      {tokensLoading && <LoadingOverlay bg="overlay" />}
+      {(isLoading || tokensLoading) && <LoadingOverlay bg="overlay" />}
       <EditTokenModal
         isOpen={isEditModalOpen}
         onDone={() => setIsEditModalOpen(false)}
-        token={selectedTokens.length === 1 && selectedTokens[0]}
+        tokenId={selectedTokens.length === 1 && selectedTokens[0].id}
       />
       <EditGroupModal
         isOpen={isGroupModalOpen}