From 4b7bc29a3a0bef70882fcdf68fc027e7203957bb Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sat, 17 Feb 2024 23:12:52 +0200
Subject: [PATCH] feat: inline page loading indicator

---
 server/plugins/loader.ts | 48 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 server/plugins/loader.ts

diff --git a/server/plugins/loader.ts b/server/plugins/loader.ts
new file mode 100644
index 00000000..74adc667
--- /dev/null
+++ b/server/plugins/loader.ts
@@ -0,0 +1,48 @@
+const id = `loader-${Math.random().toString(16).split('.')[1]}`;
+
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('render:html', (html) => {
+    html.head.unshift(
+      `<script>
+        window.addEventListener("beforeunload", function (event) {
+          document.querySelector('#${id}').style.display = 'none';
+        })
+        document.addEventListener('DOMContentLoaded', function () {
+          document.querySelector('#${id}').style.display = 'none';
+        });
+      </script>
+      <div id="${id}"></div>
+      <style>
+        #${id} {
+          display: inline-block;
+          position: fixed;
+          left: 0;
+          top: 0;
+          width: 0px;
+          box-shadow: 0 0 2px 0px #8fa1ff;
+          height: 2px;
+          animation: loader 100s cubic-bezier(0.000, 0.990, 0.595, 1.005) infinite;
+          background: #8fa1ff;
+          z-index: 3;
+        }
+
+        @keyframes loader {
+          0% {
+            width: 0vw;
+          }
+
+          100% {
+            width: 100vw;
+          }
+        }
+      </style>
+      <noscript>
+        <style>
+          #${id} {
+            display: none;
+          }
+        </style>
+      </noscript>`,
+    );
+  });
+});