Add warning that Mac OS X takes a while to boot

Show for 10 seconds the first 10 times Mac OS X booted (but can also be explicitly dismissed)

Updates #357

Author: mihaip

src/Mac.css

@@ -33,6 +33,15 @@ body.fullscreen {
     border-radius: 10px;
 }
 
+.Mac-Loading-Slow {
+    white-space: nowrap;
+    display: block;
+}
+
+.Mac-Loading-Dismiss {
+    margin-right: 8px;
+}
+
 .Mac-Loading-Fraction {
     opacity: 0.5;
     padding-left: 0.5em;

src/Mac.tsx

@@ -490,6 +490,26 @@ export default function Mac({
         );
     }
 
+    const {showMacOSXSlowNotification, clearMacOSXSlowNotification} =
+        useMacOSXSlowNotification(
+            !progress &&
+                emulatorLoaded &&
+                disks[0]?.infiniteHdSubset === "macosx"
+        );
+    if (showMacOSXSlowNotification) {
+        progress = (
+            <div className="Mac-Loading Mac-Loading-Non-Modal Mac-Loading-Slow">
+                <span
+                    className="Mac-Loading-Dismiss"
+                    onClick={clearMacOSXSlowNotification}>
+                    ⓧ
+                </span>
+                Mac OS X may take a minute or two to start up, please be
+                patient.
+            </div>
+        );
+    }
+
     function handleDragStart(event: React.DragEvent) {
         // Don't allow the screen to be dragged off when using a touchpad on
         // the iPad.
@@ -995,3 +1015,28 @@ function MacError({text, onDone}: {text: string; onDone: () => void}) {
         </Dialog>
     );
 }
+
+function useMacOSXSlowNotification(emulatorReady: boolean) {
+    const [count, setCount] = usePersistentState(
+        10,
+        "mac-os-x-slow-notification-count"
+    );
+    const [hide, setHide] = useState(false);
+    const shouldShow = count > 0 && emulatorReady;
+
+    useEffect(() => {
+        if (shouldShow) {
+            setCount(v => v - 1);
+        }
+        setTimeout(() => setHide(true), 10_000);
+    }, [setCount, shouldShow]);
+
+    const clearMacOSXSlowNotification = useCallback(
+        () => setCount(0),
+        [setCount]
+    );
+    return {
+        showMacOSXSlowNotification: shouldShow && !hide,
+        clearMacOSXSlowNotification,
+    };
+}