Refresh on active

src/app.css

@@ -243,4 +243,9 @@ iframe[name="editor-canvas"] {
 
 .revision-content {
   max-width: 600px;
+}
+
+.is-loading {
+  pointer-events: none;
+  opacity: 0.5;
 }

src/list.jsx

@@ -26,7 +26,13 @@ import { __ } from '@wordpress/i18n';
 import { v4 as uuidv4 } from 'uuid';
 import { motion } from 'framer-motion';
 
-import { Read, Write, saveFile, getTagsFromText } from './read-write';
+import {
+	Read,
+	Write,
+	saveFile,
+	getTagsFromText,
+	createRevisionName,
+} from './read-write';
 import Editor from './editor';
 import Sidebar, { filterItems, INITIAL_VIEW } from './sidebar.jsx';
 import { Revisions } from './revisions';
@@ -47,8 +53,8 @@ function getInitialSelection({ path, blocks }) {
 	return { selectionStart: sel, selectionEnd: sel };
 }
 
-function refresh({ selectedFolderURL, items, setItems, setItem }) {
-	getPaths('', selectedFolderURL)
+async function refresh({ selectedFolderURL, items, setItems, setItem }) {
+	await getPaths('', selectedFolderURL)
 		.then((_paths) => {
 			const pathObjects = _paths.map((_file) => ({
 				..._file,
@@ -135,6 +141,33 @@ export default function Frame({ selectedFolderURL, setSelectedFolderURL }) {
 
 	const [observer, { width }] = useResizeObserver();
 
+	const itemsRef = useRef(items);
+
+	useEffect(() => {
+		itemsRef.current = items;
+	}, [items]);
+
+	useEffect(() => {
+		function change() {
+			if (document.visibilityState === 'visible') {
+				currentRevisionRef.current = createRevisionName();
+				document.body.classList.add('is-loading');
+				refresh({
+					selectedFolderURL,
+					items: itemsRef.current,
+					setItems,
+					setItem,
+				}).then(() => {
+					document.body.classList.remove('is-loading');
+				});
+			}
+		}
+		document.addEventListener('visibilitychange', change);
+		return () => {
+			document.removeEventListener('visibilitychange', change);
+		};
+	}, [currentRevisionRef, selectedFolderURL, setItem]);
+
 	if (!currentId) {
 		return null;
 	}
@@ -276,7 +309,7 @@ export default function Frame({ selectedFolderURL, setSelectedFolderURL }) {
 						onClick={() => {
 							refresh({
 								selectedFolderURL,
-								items,
+								items: itemsRef.current,
 								setItems,
 								setItem,
 							});

src/read-write.js

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
-function createRevisionName() {
+export function createRevisionName() {
 	return new Date().toISOString().replaceAll(':', '_');
 }
 
@@ -255,18 +255,6 @@ export function Write({
 		setItem,
 	]);
 
-	useEffect(() => {
-		function change() {
-			if (document.visibilityState === 'visible') {
-				currentRevisionRef.current = createRevisionName();
-			}
-		}
-		document.addEventListener('visibilitychange', change);
-		return () => {
-			document.removeEventListener('visibilitychange', change);
-		};
-	}, [currentRevisionRef]);
-
 	return null;
 }