From 8c814187c8845e8deb16c629226ae5c10eca5986 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20J=C3=BCrgens?= <maltejur@dismail.de>
Date: Mon, 29 May 2023 16:01:03 +0200
Subject: [PATCH] remove skeleton

---
 src/modules/ausgabeHertzblatt.ts  | 49 +++++++++-------------------
 src/modules/ausgabeHertzschlag.ts | 54 ++++++++++++-------------------
 src/modules/utils.ts              | 10 ------
 src/style.css                     | 35 ++------------------
 4 files changed, 39 insertions(+), 109 deletions(-)

diff --git a/src/modules/ausgabeHertzblatt.ts b/src/modules/ausgabeHertzblatt.ts
index 6d0f6f5..c524c94 100644
--- a/src/modules/ausgabeHertzblatt.ts
+++ b/src/modules/ausgabeHertzblatt.ts
@@ -1,4 +1,3 @@
-import { checkFile } from "./utils";
 import json from "../../assets/data.json";
 import Page from "./page";
 
@@ -26,39 +25,23 @@ export default function AusgabeHertzblatt(params) {
     <i class="fa fa-link"></i>Link
   </a>`;
 
-  const skeleton = document.createElement("div");
-  skeleton.innerHTML = `
-  <a class="button-skeleton"><i class="fa fa-file-pdf-o"></i><span>PDF Anzeigen</span></a>
-  <a class="button-skeleton"><i class="fa fa-download"></i><span>Download</span></a>
-  `;
-  ret.innerHTML = pagehtml;
-  ret.appendChild(skeleton);
+  pagehtml += `
+<a class="button" href="#hertzblatt/${ausg.Ausgabe}/pdf">
+  <i class="fa fa-file-pdf-o"></i>PDF Anzeigen
+</a>
+<button>
+  <i class="fa fa-download"></i>Download
+  <div class="dropdown">
+    <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf', '_self');">
+      <i class="fa fa-file-download"></i>Niedrige Qualität
+    </a>
+    <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf', '_self');">
+      <i class="fa fa-file-download"></i>Hohe Qualität
+    </a>
+  </div>
+</button>`;
 
-  checkFile(`${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf`).then(
-    (exists) => {
-      if (exists) {
-        skeleton.remove();
-        ret.innerHTML +=
-          // prettier-ignore
-          `
-          <a class="button" href="#hertzblatt/${ausg.Ausgabe}/pdf">
-            <i class="fa fa-file-pdf-o"></i>PDF Anzeigen
-          </a>
-          <button>
-            <i class="fa fa-download"></i>Download
-            <div class="dropdown">
-              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf', '_self');">
-                <i class="fa fa-file-download"></i>Niedrige Qualität
-              </a>
-              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf', '_self');">
-                <i class="fa fa-file-download"></i>Hohe Qualität
-              </a>
-            </div>
-          </button>
-          `;
-      }
-    }
-  );
+  ret.innerHTML = pagehtml;
 
   return Page(ret);
 }
diff --git a/src/modules/ausgabeHertzschlag.ts b/src/modules/ausgabeHertzschlag.ts
index f6bfe4c..cd851dc 100644
--- a/src/modules/ausgabeHertzschlag.ts
+++ b/src/modules/ausgabeHertzschlag.ts
@@ -1,4 +1,3 @@
-import { checkFile } from "./utils";
 import json from "../../assets/data.json";
 import Page from "./page";
 
@@ -28,39 +27,28 @@ export default function AusgabeHertzschlag(params) {
     }
   }
 
-  const skeleton = document.createElement("div");
-  skeleton.innerHTML = `
-  <a class="button-skeleton"><i class="fa fa-file-pdf-o"></i><span>PDF Anzeigen</span></a>
-  <a class="button-skeleton"><i class="fa fa-download"></i><span>Download</span></a>
-  `;
-  ret.innerHTML = pagehtml;
-  ret.appendChild(skeleton);
+  pagehtml += `
+<a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf">
+  <i class="fa fa-file-pdf-o"></i>PDF Anzeigen
+</a>
+<button>
+  <i class="fa fa-download"></i>Download
+  <div class="dropdown">
+    <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/compressed/${
+    ausg["Ausgabe"]
+  }.pdf">
+      <i class="fa fa-file"></i>Niedrige Qualität
+    </a>
+    <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/${
+    ausg["Ausgabe"]
+  }.pdf">
+      <i class="fa fa-file"></i>Hohe Qualität
+    </a>
+  </div>
+</button>
+`;
 
-  checkFile(`${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf`).then(
-    (exists) => {
-      if (exists) {
-        skeleton.remove();
-        ret.innerHTML +=
-          // prettier-ignore
-          `
-        <a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf">
-          <i class="fa fa-file-pdf-o"></i>PDF Anzeigen
-        </a>
-        <button>
-          <i class="fa fa-download"></i>Download
-          <div class="dropdown">
-            <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf">
-              <i class="fa fa-file"></i>Niedrige Qualität
-            </a>
-            <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf">
-              <i class="fa fa-file"></i>Hohe Qualität
-            </a>
-          </div>
-        </button>
-        `;
-      }
-    }
-  );
+  ret.innerHTML = pagehtml;
 
   return Page(ret);
 }
diff --git a/src/modules/utils.ts b/src/modules/utils.ts
index d66fdfd..309e794 100644
--- a/src/modules/utils.ts
+++ b/src/modules/utils.ts
@@ -1,13 +1,3 @@
-export function checkFile(url) {
-  return new Promise((resolve) => {
-    fetch(url, {
-      method: "HEAD",
-    })
-      .catch(() => resolve(false))
-      .then(() => resolve(true));
-  });
-}
-
 export function downloadFile(sUrl: string) {
   var link = document.createElement("a");
   link.href = sUrl;
diff --git a/src/style.css b/src/style.css
index c45d53b..110f846 100644
--- a/src/style.css
+++ b/src/style.css
@@ -186,8 +186,7 @@ body {
 }
 
 button,
-.button,
-.button-skeleton {
+.button {
   border: none;
   border-radius: 8px;
   text-align: center;
@@ -208,43 +207,13 @@ button,
   transition: background-color 0.2s ease;
 }
 
-.button-skeleton {
-  background: linear-gradient(
-      90deg,
-      rgb(250, 250, 250) 0%,
-      rgb(230, 230, 230) 50%,
-      rgb(250, 250, 250) 100%
-    )
-    rgb(250, 250, 250);
-  background-repeat: no-repeat;
-  animation: skeleton-loading 1s infinite;
-}
-
-.button-skeleton > span,
-.button-skeleton > i {
-  color: transparent;
-  user-select: none;
-  background-color: rgb(230, 230, 230);
-}
-
-@keyframes skeleton-loading {
-  from {
-    background-position: -200px 0;
-  }
-
-  to {
-    background-position: 200px 0;
-  }
-}
-
 button:hover,
 .button:hover {
   background-color: darkred;
 }
 
 button .fas,
-.button .fas,
-.button-skeleton .fas {
+.button .fas {
   margin-right: 0.6em;
 }