add calendar loading indicator, prepolulate door status image to prevent layout shift

themes/hugo-theme-flat/layouts/partials/side-calendar.html

@@ -1,6 +1,8 @@
 <div class="side-calendar">
     <h2>Termine</h2>
-    <ul id="calendar"></ul>
+    <ul id="calendar">
+        <li class="loading">Loading...</li>
+    </ul>
 
 
 

themes/hugo-theme-flat/layouts/partials/side-door-status.html

@@ -2,7 +2,7 @@
     <h2>Doorstatus</h2>
 
 
-    <p><img src="" id="ds-img"></p>
+    <p><img src="/img/trans.png" id="ds-img"></p>
     <p>Aktueller Status: <span id="ds-status"></span></p>
     <p>Status vom: <span id="ds-date"></span></p>
     <p>Temperatur Clubraum: <span id="ds-temp"></span></p>

themes/hugo-theme-flat/static/js/calendar.js

@@ -52,6 +52,7 @@ document.addEventListener("DOMContentLoaded", function () {
         li.attr("title", item.description);
         li.appendTo(box);
       }
+      document.querySelector("#calendar .loading").remove();
       $(".location", box).click(function () {
         navigator.clipboard.writeText($(this).attr("data-loc"));
       });