From 4d455f395c888fa8f0fdd2db9f801e5edd13e7bf Mon Sep 17 00:00:00 2001
From: iacore <noreply+gpg-stub@1a-insec.net>
Date: Mon, 12 Feb 2024 19:54:03 +0000
Subject: [PATCH] Add loading bar (ugly)

---
 views/css/style.css     | 35 +++++++++++++++++++++++++++--------
 views/css/style.css.map |  2 +-
 views/css/style.scss    | 38 +++++++++++++++++++++++++++++++-------
 views/layout.jet.html   | 11 +++++++++--
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/views/css/style.css b/views/css/style.css
index 5a7a316..b55af18 100644
--- a/views/css/style.css
+++ b/views/css/style.css
@@ -1,7 +1,3 @@
-:root {
-  --small-breakpoint: 440px;
-}
-
 html {
   font-size: 62.5%;
 }
@@ -15,8 +11,9 @@ body {
   font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP";
   margin-bottom: 10px;
 }
-@media (min-width: var(--small-breakpoint)) {
-  body {
+
+@media (min-width: 440px) {
+  main {
     margin-inline: 5px;
   }
 }
@@ -204,6 +201,27 @@ input[type=submit][hidden] {
   filter: brightness(1);
 }
 
+#loading-indicator {
+  z-index: 2;
+  isolation: isolate;
+  position: sticky;
+  top: 0;
+  height: 4px;
+  margin-bottom: -4px;
+}
+#loading-indicator.htmx-request {
+  background-image: repeating-linear-gradient(90deg, #118bee, #fff, #118bee, #fff, #118bee);
+  animation: rolling-something 3s linear infinite;
+}
+
+@keyframes rolling-something {
+  0% {
+    background-position-x: -33vw;
+  }
+  100% {
+    background-position-x: 100vw;
+  }
+}
 nav {
   margin-top: 15px;
   margin-bottom: 15px;
@@ -243,6 +261,8 @@ nav .navigation-wrapper .sidebar-label {
   cursor: pointer;
 }
 nav .navigation-wrapper .sidebar {
+  z-index: 1;
+  isolation: isolate;
   background-color: #131516;
   position: absolute;
   padding-top: 6px;
@@ -250,7 +270,6 @@ nav .navigation-wrapper .sidebar {
   width: 220px;
   transform: translateX(-220px);
   transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
-  z-index: 999;
 }
 nav .navigation-wrapper .sidebar br {
   align-self: stretch;
@@ -300,7 +319,7 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
   margin-inline: auto;
   padding-inline: 4px;
 }
-@media (min-width: var(--small-breakpoint)) {
+@media (min-width: 440px) {
   .container {
     padding-inline: 10px;
   }
diff --git a/views/css/style.css.map b/views/css/style.css.map
index 013700f..955b92a 100644
--- a/views/css/style.css.map
+++ b/views/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAgBA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA,kBA5BG;EA6BH,OA3BG;EA6BH;EACA,aApBY;EAsBZ;;AACA;EAXF;IAYI;;;;AAIJ;EACE,OArCK;EAsCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBA1DG;EA2DH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAvGc;EAwGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBApHa;EAqHb,OAnHa;;;AAsHf;AAAA;EAEE,kBA1Ha;;;AA6Hf;EACE;EACA;;;AAGF;EACE;EACA,eA/Hc;EAgId;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eApJc;EAqJd;EACA;EACA;EACA,aAvJY;EAwJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aA3JY;;;AA8Jd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBA3LK;EA4LL;EACA,OA/LG;;;AAkML;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBAjOW;EAkOX;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OAvPH;;AA4PC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE,kBAxRD;EAyRC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OA9SL;EA+SK;EACA;EACA;;AAEA;EACE,kBArTG;;AAwTL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OAvYC;;AA2YD;AAAA;EACE,OAhYgB;EAiYhB,QAjYgB;;AAoYlB;AAAA;EACE,WArYgB;;AAwYlB;AAAA;EACE,WAzYgB;;AA0YhB;AAAA;EACE,WA5Yc;;AAkZlB;AAAA;EACE,OAnZgB;EAoZhB,QApZgB;;AAuZlB;AAAA;EACE,WAxZgB;;AA2ZlB;AAAA;EACE,WA5ZgB;;AA8ZhB;AAAA;EACE,WA/Zc;;AAoapB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBA/cI;EAgdJ,OAndH;;AAsdC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OA9dH;EA+dG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eA3eU;;AA8eZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBAjiBa;EAkiBb,eA7hBc;EA8hBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OAtkBK;;AA4kBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OAlmBI;;AAqmBN;EACE,OAvmBD;EAwmBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OAnpBD;;AAqpBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBAjwBa;EAkwBb;;AAEA;EACE;EACA,OArwBC;EAswBD,kBAvwBW;EAwwBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBAlzBa;EAmzBb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAiBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAzBG;EA0BH,OAxBG;EA0BH;EACA,aAjBY;EAmBZ;;;AAIA;EADF;IAEI;;;;AAIJ;EACE,OArCK;EAsCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBA1DG;EA2DH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAvGc;EAwGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBApHa;EAqHb,OAnHa;;;AAsHf;AAAA;EAEE,kBA1Ha;;;AA6Hf;EACE;EACA;;;AAGF;EACE;EACA,eA/Hc;EAgId;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eApJc;EAqJd;EACA;EACA;EACA,aAvJY;EAwJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aA3JY;;;AA8Jd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBA3LK;EA4LL;EACA,OA/LG;;;AAkML;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBAjOW;EAkOX;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EAGE;EACA;;;AAGJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OA9QH;;AAmRC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA,kBAjTD;EAkTC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OAtUL;EAuUK;EACA;EACA;;AAEA;EACE,kBA7UG;;AAgVL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OA/ZC;;AAmaD;AAAA;EACE,OAxZgB;EAyZhB,QAzZgB;;AA4ZlB;AAAA;EACE,WA7ZgB;;AAgalB;AAAA;EACE,WAjagB;;AAkahB;AAAA;EACE,WApac;;AA0alB;AAAA;EACE,OA3agB;EA4ahB,QA5agB;;AA+alB;AAAA;EACE,WAhbgB;;AAmblB;AAAA;EACE,WApbgB;;AAsbhB;AAAA;EACE,WAvbc;;AA4bpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAveI;EAweJ,OA3eH;;AA8eC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAtfH;EAufG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eAngBU;;AAsgBZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBAzjBa;EA0jBb,eArjBc;EAsjBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OA9lBK;;AAomBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OA1nBI;;AA6nBN;EACE,OA/nBD;EAgoBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OA3qBD;;AA6qBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBAzxBa;EA0xBb;;AAEA;EACE;EACA,OA7xBC;EA8xBD,kBA/xBW;EAgyBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBA10Ba;EA20Bb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/views/css/style.scss b/views/css/style.scss
index 1691a04..f1acee8 100644
--- a/views/css/style.scss
+++ b/views/css/style.scss
@@ -13,10 +13,7 @@ $color-shadow: #bbbbbb20;
 $font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP";
 $small-artwork-width: 184px;
 $large-artwork-width: 288px;
-
-:root {
-  --small-breakpoint: 440px;
-}
+$small-breakpoint: 440px;
 
 html {
   font-size: 62.5%;
@@ -33,7 +30,10 @@ body {
   font-family: $font-family;
 
   margin-bottom: 10px;
-  @media(min-width: var(--small-breakpoint)) {
+}
+
+main {
+  @media (min-width: $small-breakpoint) {
     margin-inline: 5px;
   }
 }
@@ -229,6 +229,29 @@ input[type="submit"][hidden] {
   }
 }
 
+#loading-indicator {
+  z-index: 2;
+  isolation: isolate;
+  position: sticky;
+  top: 0;
+  height: 4px;
+  margin-bottom: -4px;
+  &.htmx-request {
+    // background: $link;
+    // https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
+    background-image: repeating-linear-gradient(90deg, $link, $fg, $link, $fg, $link); 
+    animation: rolling-something 3s linear infinite;
+  }
+}
+@keyframes rolling-something {
+  0% {
+    background-position-x: -33vw
+  }
+  100% {
+    background-position-x: 100vw
+  }
+}
+
 nav {
   margin-top: 15px;
   margin-bottom: 15px;
@@ -278,6 +301,8 @@ nav {
     }
 
     .sidebar {
+      z-index: 1;
+      isolation: isolate;
       background-color: $bg;
       position: absolute;
       padding-top: 6px;
@@ -285,7 +310,6 @@ nav {
       width: 220px;
       transform: translateX(-220px);
       transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
-      z-index: 999;
 
       br {
         align-self: stretch;
@@ -358,7 +382,7 @@ nav {
   max-width: 1200px;
   margin-inline: auto;
   padding-inline: 4px;
-  @media(min-width: var(--small-breakpoint)) {
+  @media (min-width: $small-breakpoint) {
     padding-inline: 10px;
   }
 }
diff --git a/views/layout.jet.html b/views/layout.jet.html
index aa47b29..6138013 100644
--- a/views/layout.jet.html
+++ b/views/layout.jet.html
@@ -7,7 +7,7 @@
     <meta charset="UTF-8" />
     <meta name="description" content="View this page on PixivFE." />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
     <meta name="referrer" content="no-referrer, same-origin" />
     <link href="/css/style.css" rel="stylesheet" />
     <script src="/js/htmx@1.9.10.min.js" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"></script>
@@ -32,7 +32,14 @@
     {{ end }}
   </head>
 
-  <body hx-boost="true" hx-target="main" hx-select="main">
+  <body hx-boost="true" hx-target="main" hx-select="main" hx-indicator="#loading-indicator">
+    <script>
+      document.body.addEventListener('htmx:beforeOnLoad', function (evt) {
+        evt.detail.shouldSwap = true;
+        evt.detail.isError = false;
+      });
+    </script>
+    <div id="loading-indicator"></div>
     <nav>
       <div class="navigation-wrapper">
         <span>