button skeleton

src/modules/ausgabeHertzblatt.ts

@@ -7,46 +7,59 @@ export default function AusgabeHertzblatt(params) {
 
   const ausg = json.hertzblatt.find((i) => i["Ausgabe"] == params.id);
 
-  if (ausg) {
+  if (ausg === undefined) {
-    let pagehtml = `
+    console.warn(params.id, "not found");
+    return;
+  }
+
+  let pagehtml = `
     <img class="cover" src="${json.baseUrl}hertzblatt/images/${ausg.Ausgabe}.jpg"></img>
     <h1>HertzBLATT ${ausg["Name"]}</h1>
     `;
-    for (let i in ausg) {
+  for (let i in ausg) {
-      if (ausg[i] != null && !["Web", "Ausgabe", "Name"].includes(i)) {
+    if (ausg[i] != null && !["Web", "Ausgabe", "Name"].includes(i)) {
-        pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
+      pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
-      }
     }
-    if (ausg.Web)
+  }
-      pagehtml += `<a class="button" href="${ausg.Web}">
+
+  if (ausg.Web)
+    pagehtml += `<a class="button" href="${ausg.Web}">
     <i class="fas fa-link"></i>Link
   </a>`;
-    checkFile(`${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf`).then(
+
-      (exists) => {
+  const skeleton = document.createElement("div");
-        if (exists) {
+  skeleton.innerHTML = `
-          ret.innerHTML +=
+  <a class="button-skeleton"><i class="fas fa-file-pdf"></i><span>PDF Anzeigen</span></a>
-            // prettier-ignore
+  <a class="button-skeleton"><i class="fas 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="fas fa-file-pdf"></i>PDF Anzeigen
           </a>
           <button>
             <i class="fas fa-download"></i>Download
             <div class="dropdown">
-              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf?download', '_self');">
+              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf', '_self');">
                 <i class="fas fa-file-download"></i>Niedrige Qualität
               </a>
-              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf?download', '_self');">
+              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf', '_self');">
                 <i class="fas fa-file-download"></i>Hohe Qualität
               </a>
             </div>
           </button>
           `;
-        }
       }
-    );
+    }
+  );
 
-    ret.innerHTML = pagehtml;
-  }
   return Page(ret);
 }

src/modules/ausgabeHertzschlag.ts

@@ -7,6 +7,11 @@ export default function AusgabeHertzschlag(params) {
 
   const ausg = json.hertzschlag.find((i) => i["Ausgabe"] == params.id);
 
+  if (ausg === undefined) {
+    console.warn(params.id, "not found");
+    return;
+  }
+
   let pagehtml = `
   <img class="cover" src="${json.baseUrl}hertzschlag/images/${ausg["Ausgabe"]}.jpg"></img>
   <h2>HertzSCHLAG ${ausg["Ausgabe"]}</h2>
@@ -23,9 +28,19 @@ export default function AusgabeHertzschlag(params) {
       pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
     }
   }
+
+  const skeleton = document.createElement("div");
+  skeleton.innerHTML = `
+  <a class="button-skeleton"><i class="fas fa-file-pdf"></i><span>PDF Anzeigen</span></a>
+  <a class="button-skeleton"><i class="fas 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
           `
@@ -35,10 +50,10 @@ export default function AusgabeHertzschlag(params) {
         <button>
           <i class="fas fa-download"></i>Download
           <div class="dropdown">
-            <a href="${json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf?download">
+            <a href="${json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf">
               <i class="fas fa-file-download"></i>Niedrige Qualität
             </a>
-            <a href="${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf?download">
+            <a href="${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf">
               <i class="fas fa-file-download"></i>Hohe Qualität
             </a>
           </div>
@@ -48,6 +63,5 @@ export default function AusgabeHertzschlag(params) {
     }
   );
 
-  ret.innerHTML = pagehtml;
   return Page(ret);
 }

src/style.css

@@ -162,30 +162,62 @@ body {
 }
 
 button,
-.button {
+.button,
-  background-color: rgb(201, 2, 2);
+.button-skeleton {
   border: none;
   border-radius: 8px;
-  color: white;
-  padding: 15px 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
-  cursor: pointer;
   margin-right: 1em;
   margin-top: 1em;
-  transition: background-color 0.2s ease;
+  padding: 15px 20px;
   position: relative;
 }
 
+button,
+.button {
+  background-color: rgb(201, 2, 2);
+  color: white;
+  cursor: pointer;
+  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;
 }
 
@@ -316,6 +348,7 @@ iframe {
     top: 25px;
     right: 55px;
   }
+
   #header nav a {
     font-size: 16px;
     margin-left: 15px;
@@ -458,4 +491,4 @@ i {
   right: 0;
   z-index: 9;
   cursor: inherit;
-}
+}