Improve experience of the initial page load

Avoid showing a spinner when there is no local library and no remote
id specified.

src/js/components/bibliographySection.jsx

@@ -53,11 +53,11 @@ const BibliographySection = props => {
 	return (
 		<section
 			className={ cx('section', 'section-bibliography',
-				{ 'loading': !isReady && !isHydrated, 'empty': isReady && bibliography.items.length === 0 })
+				{ 'loading': !isReady && !isHydrated, 'empty': localCitationsCount === 0 })
 			}
 		>
 			<div className="container" suppressHydrationWarning={ true }>
-				{ (isReady && bibliography.items.length === 0) ? (
+				{ (!isReadOnly && localCitationsCount === 0) ? (
 					<React.Fragment>
 						<img className="empty-bibliography" src="static/images/empty-bibliography.svg" width="320" height="200" />
 						<h2 className="empty-title">

src/js/components/container.jsx

@@ -142,12 +142,19 @@ const BibWebContainer = props => {
 	const revertCitationStyle = useRef(null);
 	const lastDeletedItem = useRef(null);
 	const duplicate = useRef(null);
+	const initialCitationsCount = useRef(null);
 	const [isDataReady, setIsDataReady] = useState(false);
 	const [activeDialog, setActiveDialog] = useState(null);
 	const wasDataReady = usePrevious(isDataReady);
 	const isReadOnly = !!remoteId;
 	const hydrateItemsCount = props.hydrateItemsCount;
 
+	if(bib.current === null) {
+		bib.current = new ZoteroBib(config);
+		bib.current.reloadItems();
+		initialCitationsCount.current = bib.current.items.length;
+	}
+
 	// isHydrated is true during hydration render. It is used throughout app to pretend we're ready
 	// (without any data) so that rendered components (almost) match static markup (otherwise we
 	// would be showing spinners etc.). Once app is hydrated, we operate normally.
@@ -215,18 +222,7 @@ const BibWebContainer = props => {
 	]);
 	citationStyles.sort((a, b) => a.title.toUpperCase().localeCompare(b.title.toUpperCase()));
 
-	const localCitationsCount = useMemo(() => {
-		// parse citations from localStorage so we know how many there are. if remoteId is not
-		// specified, we don't care so save don't waste time parsing (to get the count, use
-		// state.bibliography.items.length instead)
-		if(remoteId) {
-			const localBib = new ZoteroBib(config);
-			localBib.reloadItems();
-			return localBib.items.length;
-		} else {
-			return null;
-		}
-	}, [config, remoteId]);
+	const localCitationsCount = remoteId ? initialCitationsCount.current : bib.current.items.length;
 
 	const buildBibliography = useCallback(async () => {
 		dispatch({ type: BEGIN_BUILD_BIBLIOGRAPHY });
@@ -1154,9 +1150,6 @@ const BibWebContainer = props => {
 		if(remoteId) {
 			fetchRemoteBibliography();
 		} else {
-			bib.current = new ZoteroBib(config);
-			bib.current.reloadItems();
-
 			const prefilledIdentifier = params.get('q') || '';
 			setIdentifier(prefilledIdentifier);
 			setIsDataReady(true);