remove skeleton

src/modules/ausgabeHertzblatt.ts

@@ -1,4 +1,3 @@
-import { checkFile } from "./utils";
 import json from "../../assets/data.json";
 import Page from "./page";
 
@@ -26,21 +25,7 @@ export default function AusgabeHertzblatt(params) {
     <i class="fa fa-link"></i>Link
   </a>`;
 
-  const skeleton = document.createElement("div");
+  pagehtml += `
-  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);
-
-  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>
@@ -54,11 +39,9 @@ export default function AusgabeHertzblatt(params) {
       <i class="fa fa-file-download"></i>Hohe Qualität
     </a>
   </div>
-          </button>
+</button>`;
-          `;
+
-      }
+  ret.innerHTML = pagehtml;
-    }
-  );
 
   return Page(ret);
 }

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");
+  pagehtml += `
-  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);
-
-  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">
+    <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">
+    <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);
 }

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;

src/style.css

@@ -186,8 +186,7 @@ body {
 }
 
 button,
-.button,
+.button {
-.button-skeleton {
   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 .fas {
-.button-skeleton .fas {
   margin-right: 0.6em;
 }