button skeleton

src/modules/ausgabeHertzblatt.ts

@@ -7,7 +7,11 @@ export default function AusgabeHertzblatt(params) {
 
   const ausg = json.hertzblatt.find((i) => i["Ausgabe"] == params.id);
 
-  if (ausg) {
+  if (ausg === undefined) {
+    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>
@@ -17,13 +21,24 @@ export default function AusgabeHertzblatt(params) {
       pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
     }
   }
+
   if (ausg.Web)
     pagehtml += `<a class="button" href="${ausg.Web}">
     <i class="fas fa-link"></i>Link
   </a>`;
+
+  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}hertzblatt/pdf/${ausg.Ausgabe}.pdf`).then(
     (exists) => {
       if (exists) {
+        skeleton.remove();
         ret.innerHTML +=
           // prettier-ignore
           `
@@ -33,10 +48,10 @@ export default function AusgabeHertzblatt(params) {
           <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>
@@ -46,7 +61,5 @@ export default function AusgabeHertzblatt(params) {
     }
   );
 
-    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;