Fix a crash when "Add to Collection" is pressed too early. Fix #579

zotero · Dec 11, 2024 · 257fda7 · 257fda7
1 parent 0abc3dd
commit 257fda7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/js/component/item/items/list.jsx b/src/js/component/item/items/list.jsx
@@ -42,6 +42,7 @@ const ItemsList = memo(props => {
 		itemsSource !== 'query' && view !== 'item-list';
 
 	const selectedItemKeys = useSelector(state => state.current.itemKeys, shallowEqual);
+	const isModalOpen = useSelector(state => state.modal.id);
 
 	const handleIsItemLoaded = useCallback(index => {
 		if(keys && !!keys[index]) {
@@ -152,7 +153,7 @@ const ItemsList = memo(props => {
 				)}
 				</AutoSizer>
 			)}
-			{ !hasChecked && !isSearchModeHack && <Spinner className="large" /> }
+			{!hasChecked && !isModalOpen && !isSearchModeHack && <Spinner className="large" /> }
 			{ hasChecked && totalResults === 0 && (
 				<div className="item-list-empty">
 					No items in this view

diff --git a/src/js/component/item/items/table.jsx b/src/js/component/item/items/table.jsx
@@ -108,6 +108,7 @@ const Table = () => {
 		(state.config.libraries.find(l => l.key === state.current.libraryKey) || {}).isMyLibrary
 	);
 	const scrollbarWidth = useSelector(state => state.device.scrollbarWidth);
+	const isModalOpen = useSelector(state => state.modal.id);
 
 	const columns = useMemo(() => {
 		const columns = columnsData
@@ -529,7 +530,7 @@ const Table = () => {
 				)}
 				</AutoSizer>
 			) }
-			{ !hasChecked && <Spinner className="large" /> }
+			{ !hasChecked && !isModalOpen && <Spinner className="large" /> }
 			{ isAdvancedSearch && (
 				<div className="table-cover">
 					Advanced search mode — press Enter to search.

diff --git a/src/js/component/modal/add-items-to-collections.jsx b/src/js/component/modal/add-items-to-collections.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Icon } from 'web-common/components';
+import { usePrevious } from 'web-common/hooks';
 
 import Libraries from '../../component/libraries';
 import Modal from '../ui/modal';
@@ -18,19 +19,22 @@ const AddItemsToCollectionsModal = () => {
 	const isOpen = useSelector(state => state.modal.id === COLLECTION_SELECT);
 	const sourceItemKeys = useSelector(state => state.modal.items);
 	const items = useSelector(state => state.libraries?.[libraryKey]?.items);
+	const isItemsReady = useSelector(state => state.current.itemKeys
+		.every(key => state.libraries[state.current.libraryKey]?.dataObjects?.[key])
+	);
+	const wasItemsReady = usePrevious(isItemsReady);
 	const sourceItemCollections = (sourceItemKeys || []).map(ik => items?.[ik]?.collections || []);
-	const hasAttachment = (sourceItemKeys || []).some(ik => {
+	const hasAttachment = isItemsReady ? (sourceItemKeys || []).some(ik => {
 		const item = items?.[ik];
-		return item.itemType === 'attachment' || !!item?.[Symbol.for('links')]?.attachment
-	});
+		return item?.itemType === 'attachment' || !!item?.[Symbol.for('links')]?.attachment
+	}) : false;
 
 	const isTouchOrSmall = useSelector(state => state.device.isTouchOrSmall);
 	const {navState, touchHeaderPath, handleNavigation, resetNavState} = useNavigationState();
 
-	const [isBusy, setBusy] = useState(false);
+	const [isBusy, setBusy] = useState(!isItemsReady);
 	const [picked, setPicked] = useState([]);
 
-
 	const pickerSkipCollections = useMemo(() => {
 		const result = [];
 
@@ -46,6 +50,12 @@ const AddItemsToCollectionsModal = () => {
 		return result;
 	}, [sourceItemCollections, sourceItemKeys]);
 
+	useEffect(() => {
+		if (!wasItemsReady && isItemsReady) {
+			setBusy(false);
+		}
+	}, [wasItemsReady, isItemsReady]);
+
 	useEffect(() => {
 		if(!isOpen) {
 			resetNavState();