Add print cycle events and loading msg

Since the print cycle now loads all images not-yet-loaded (due to lazy loading), there can be a moment of time where it appears pressing Get PDF is doing nothing, depending on connection speed.  To add a "loading" message, a custom event is fired at the start and end of the print cycle (before the print dialog comes up).

client/homebrew/navbar/print.navitem.jsx

@@ -1,9 +1,25 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Nav from './nav.jsx';
 import { printCurrentBrew } from '@shared/helpers.js';
 
 export default function(){
+	const [printing, setPrinting] = useState(false);
+
+	// listen for print cycle events to display "loading" message since it can take some time.
+	useEffect(()=>{
+		document.addEventListener('print:startprep', handlePrintStartPrep);
+		document.addEventListener('print:finishedprep', handlePrintPrepFinished);
+		return ()=>{
+			document.removeEventListener('print:startprep', handlePrintStartPrep);
+			document.removeEventListener('print:finishedprep', handlePrintPrepFinished);
+		}
+	}, []);
+
+	const handlePrintStartPrep = ()=>{ setPrinting(true); };
+
+	const handlePrintPrepFinished = ()=>{ setPrinting(false);	};
+
 	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
-		get PDF
+		{printing ? 'loading' : 'get PDF'}
 	</Nav.item>;
 };

shared/helpers.js

@@ -107,6 +107,9 @@ const splitTextStyleAndMetadata = (brew)=>{
 
 const printCurrentBrew = async ()=>{
 	if(window.typeof !== 'undefined') {
+		// fire a custom event for the print cycle
+		document.dispatchEvent(new CustomEvent('print:startprep'));
+		try {
 			const iframeDoc = window.frames['BrewRenderer'].contentDocument;
 
 			// get all img elements with lazy loading (currently only elements generated through MarkedJS)
@@ -127,6 +130,10 @@ const printCurrentBrew = async ()=>{
 			node.style.display='none';
 			node.offsetHeight; // accessing this is enough to trigger a reflow
 			node.style.display='';
+		} finally {
+			// when lazy load images have all been loaded, and the doc re-rendered for print preview, emit 'finished' event.
+			document.dispatchEvent(new CustomEvent('print:finishedprep'));
+		}
 	}
 };