fix breadcrumbs on pages restored from bfcache, code polishing

ShoshinNikita · Jan 6, 2025 · 4f6f7f9 · 4f6f7f9
1 parent e1db277
commit 4f6f7f9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 25 deletions.
diff --git a/static/css/app.css → static/css/index.css b/static/css/app.css → static/css/index.css
@@ -6,19 +6,24 @@
 	position: relative;
 
 	.new-page-loader {
+		border-width: 5px;
 		display: none;
+		height: 52px;
+		top: 30%;
+		width: 52px;
 	}
 
 	&.loading {
 		.new-page-loader {
-			border-width: 5px;
 			display: revert;
-			height: 52px;
-			top: 30%;
-			width: 52px;
 		}
 
-		.files {
+		.breadcrumb:not(.new-page-breadcrumb) {
+			display: none;
+		}
+
+		.files,
+		.not-found-message {
 			display: none;
 		}
 	}
@@ -47,6 +52,26 @@
 	font-size: 20px;
 	margin: 0;
 	padding: 0;
+
+	.breadcrumb {
+		display: inline;
+
+		&:after {
+			content: "/";
+			padding: 2px;
+		}
+
+		&:last-of-type {
+			&:after {
+				display: none;
+			}
+
+			.breadcrumb-link {
+				color: var(--font-color);
+				pointer-events: none;
+			}
+		}
+	}
 }
 
 .search {
@@ -105,20 +130,6 @@
 	height: 80px;
 }
 
-.breadcrumb {
-	display: inline;
-}
-
-.breadcrumb+.breadcrumb:before {
-	content: "/";
-	padding: 2px;
-}
-
-.breadcrumb:last-of-type .breadcrumb-link {
-	color: var(--font-color);
-	pointer-events: none;
-}
-
 .sort-selector-wrapper {
 	/* Don't render whitespaces: between the label and the selector. */
 	font-size: 0;

diff --git a/static/js/theme.js b/static/js/theme.js
@@ -8,7 +8,7 @@ const lightTheme = "light";
 const systemTheme = "system";
 const darkTheme = "dark";
 
-// From /static/css/common.css@3005a0c
+// From /static/css/global.css@65c3a4b
 const themeColors = {
 	[lightTheme]: "#ffffff",
 	[darkTheme]: "#0d1117",

diff --git a/static/templates/index.html b/static/templates/index.html
@@ -20,7 +20,7 @@
 
 	<script src="{{ prepareStaticLink `/static/js/theme.js` }}"></script>
 
-	<link rel="stylesheet" href="{{ prepareStaticLink `/static/css/app.css` }}">
+	<link rel="stylesheet" href="{{ prepareStaticLink `/static/css/index.css` }}">
 	<link rel="stylesheet" href="{{ prepareStaticLink `/static/css/entry.css` }}">
 	<link rel="stylesheet" href="{{ prepareStaticLink `/static/css/footer.css` }}">
 	<link rel="stylesheet" href="{{ prepareStaticLink `/static/css/global.css` }}">
@@ -95,7 +95,7 @@
 
 		{{ if .IsNotFound }}
 		<div class="not-found-message">
-			<span>Directory <i>"{{ .Dir }}"</i> not found<br><br>Go back to <a href="/">Home</a>?</span>
+			<span>Directory <i>"{{ .Dir }}"</i> not found<br><br>Go back to <a href="/ui/">Home</a>?</span>
 		</div>
 		{{ else if .Entries }}
 		<div class="files">
@@ -378,7 +378,7 @@
 				a.innerText = decodeURIComponent(text);
 
 				const li = document.createElement("li");
-				li.classList.add("breadcrumb");
+				li.classList.add("breadcrumb", "new-page-breadcrumb");
 				li.append(" ", a, " ");
 
 				newBreadcrumbs.push(li);
@@ -387,8 +387,17 @@
 			document.querySelector("#app").classList.add("loading");
 
 			const breadcrumbs = document.querySelector(".breadcrumbs");
-			breadcrumbs.replaceChildren(...newBreadcrumbs);
-		})
+			breadcrumbs.append(...newBreadcrumbs);
+		});
+
+		window.addEventListener("pageshow", ev => {
+			if (ev.persisted) {
+				// Page was restored from the bfcache - revert breadcrumbs and hide the spinner.
+				// https://web.dev/articles/bfcache#observe-page-restored
+				document.querySelectorAll(".breadcrumbs .new-page-breadcrumb").forEach(v => v.remove());
+				document.querySelector("#app").classList.remove("loading");
+			}
+		});
 	</script>
 </body>