From 745352d191b6f17fda88e6940e56061510da7b8d Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Mon, 29 Apr 2024 19:25:40 +0100
Subject: [PATCH 01/14] add basic calculation alert box to the top sidebar

---
 digiplan/static/scss/app.scss                 |  1 +
 .../static/scss/components/_progress.scss     |  8 ++++++++
 digiplan/static/scss/layouts/_panel.scss      | 19 +++++++++++++++++++
 .../templates/components/panel_5_results.html | 13 ++++++++++++-
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 digiplan/static/scss/components/_progress.scss

diff --git a/digiplan/static/scss/app.scss b/digiplan/static/scss/app.scss
index e747419f..7b931e1a 100644
--- a/digiplan/static/scss/app.scss
+++ b/digiplan/static/scss/app.scss
@@ -19,6 +19,7 @@
 @import 'components/modals';
 @import 'components/offcanvas';
 @import 'components/popup';
+@import 'components/progress';
 @import 'components/scenarios';
 @import 'components/tabs';
 @import 'components/top-nav';
diff --git a/digiplan/static/scss/components/_progress.scss b/digiplan/static/scss/components/_progress.scss
new file mode 100644
index 00000000..3377c306
--- /dev/null
+++ b/digiplan/static/scss/components/_progress.scss
@@ -0,0 +1,8 @@
+.progress {
+  .progress-bar {
+    @extend .progress-bar-striped;
+    @extend .progress-bar-animated;
+    @extend .bg-success;
+    background-color: rgba(74, 194, 157, var(--bs-bg-opacity)) !important;
+  }
+}
\ No newline at end of file
diff --git a/digiplan/static/scss/layouts/_panel.scss b/digiplan/static/scss/layouts/_panel.scss
index 3770c9c2..55b3da2d 100644
--- a/digiplan/static/scss/layouts/_panel.scss
+++ b/digiplan/static/scss/layouts/_panel.scss
@@ -124,6 +124,24 @@
       @extend .px-0;
     }
 
+    &__calc-alert {
+      @extend .p-2;
+      @extend .p-2;
+      @extend .border;
+
+      &-message {
+        @extend .fs-7;
+        padding-bottom: 0.75rem;
+      }
+
+      &-explanation {
+        @extend .fs-7;
+        @extend .fw-semibold;
+        @extend .text-info;
+        padding-bottom: 0.75rem;
+      }
+    }
+
     &__tabs {
       .nav-tabs {
         @extend .pt-2;
@@ -215,6 +233,7 @@
       @extend .d-flex;
       @extend .flex-row;
       @extend .align-items-center;
+      @extend .pt-2;
 
       select,
       img {
diff --git a/digiplan/templates/components/panel_5_results.html b/digiplan/templates/components/panel_5_results.html
index 0105c23a..09829acd 100644
--- a/digiplan/templates/components/panel_5_results.html
+++ b/digiplan/templates/components/panel_5_results.html
@@ -2,6 +2,17 @@
 
 <div class="panel__settings panel__settings--padding">
   <div class="panel-item">
+    <div class="panel-item__calc-alert">
+      <div class="panel-item__calc-alert-message">{% translate "Detailergebnisse werden berechnet" %}</div>
+      <div class="panel-item__calc-alert-explanation">
+        <button type="button" class="btn btn-link btn-sm" data-bs-toggle="tooltip" data-bs-placement="right" title="Text hinzufügen">
+          {% translate "Warum?" %}
+        </button>
+      </div>
+      <div class="progress">
+        <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
+      </div>
+    </div>
     <div class="panel-item__form">
       <select id="result_views" class="form-select" aria-label="Default select example">
         <option value="" title="{% translate "Keine Auswahl" %}" selected>{% translate "Keine Auswahl" %}</option>
@@ -150,4 +161,4 @@ <h2 class="panel-item__nav-header">{% translate "View" %}</h2>
       </ul>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file

From fda1aaa7460a275169668b2aa39c4a758b5732cd Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Tue, 30 Apr 2024 10:09:47 +0100
Subject: [PATCH 02/14] add font-weight to explanation button

---
 digiplan/static/scss/layouts/_panel.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/digiplan/static/scss/layouts/_panel.scss b/digiplan/static/scss/layouts/_panel.scss
index 55b3da2d..fbc44474 100644
--- a/digiplan/static/scss/layouts/_panel.scss
+++ b/digiplan/static/scss/layouts/_panel.scss
@@ -134,8 +134,9 @@
         padding-bottom: 0.75rem;
       }
 
-      &-explanation {
+      &-explanation button {
         @extend .fs-7;
+        @extend .ps-0;
         @extend .fw-semibold;
         @extend .text-info;
         padding-bottom: 0.75rem;

From c08400d45194125c7ad7c636714790fad37840a3 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Tue, 30 Apr 2024 10:35:21 +0100
Subject: [PATCH 03/14] add placeholder text to explanation tooltip

---
 digiplan/templates/components/panel_5_results.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/digiplan/templates/components/panel_5_results.html b/digiplan/templates/components/panel_5_results.html
index 09829acd..13f1ad03 100644
--- a/digiplan/templates/components/panel_5_results.html
+++ b/digiplan/templates/components/panel_5_results.html
@@ -5,7 +5,7 @@
     <div class="panel-item__calc-alert">
       <div class="panel-item__calc-alert-message">{% translate "Detailergebnisse werden berechnet" %}</div>
       <div class="panel-item__calc-alert-explanation">
-        <button type="button" class="btn btn-link btn-sm" data-bs-toggle="tooltip" data-bs-placement="right" title="Text hinzufügen">
+        <button type="button" class="btn btn-link btn-sm" data-bs-toggle="tooltip" data-bs-placement="right" title="{% translate "Es werden komplexe Modelle verwendet, um Ihre Daten präzise zu analysieren. Diese tiefgehenden Berechnungen benötigen Zeit, um Ihnen zuverlässige und genaue Ergebnisse zu liefern." %}">
           {% translate "Warum?" %}
         </button>
       </div>
@@ -19,7 +19,7 @@
         <optgroup label="{% translate "Renewable Energies (RE)" %}">
           <option value="energy_share_2045"
                   title="{% translate "Annual balance sheet share of renewable energy (wind energy, photovoltaic, hydroelectric power) in the electricity demand of the sectors agriculture, GHG (trade, commerce, services), households and industry in percent. The demand is the net electricity consumption, i.e. transmission losses and power plant consumption are not taken into account. 49.7% of the electricity demand in Germany was covered by renewable energies in 2022." %}">
-                  {% translate "Renewable Energy Share of Demand" %} (%)
+                  {% translate "Renewable Energy Share of Demand (%)" %}
           </option>
           <option value="energy_2045"
                   title="{% translate "Annual amount of energy fed into the grid from renewable plants in gigawatt hours (wind energy, photovoltaic, hydro power)." %}">

From 83a2e1bb6ca131c690cc8bf2f3588009063c4b4a Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Tue, 30 Apr 2024 10:45:21 +0100
Subject: [PATCH 04/14] add error modifier calculation alert box

---
 digiplan/static/scss/components/_progress.scss | 7 +++++++
 digiplan/static/scss/layouts/_panel.scss       | 9 +++++++++
 2 files changed, 16 insertions(+)

diff --git a/digiplan/static/scss/components/_progress.scss b/digiplan/static/scss/components/_progress.scss
index 3377c306..29ae5a80 100644
--- a/digiplan/static/scss/components/_progress.scss
+++ b/digiplan/static/scss/components/_progress.scss
@@ -5,4 +5,11 @@
     @extend .bg-success;
     background-color: rgba(74, 194, 157, var(--bs-bg-opacity)) !important;
   }
+}
+
+.progress--error {
+  .progress-bar {
+    @extend .bg-danger;
+    background-color: rgba(229, 112, 127, var(--bs-bg-opacity)) !important;
+  }
 }
\ No newline at end of file
diff --git a/digiplan/static/scss/layouts/_panel.scss b/digiplan/static/scss/layouts/_panel.scss
index fbc44474..2a6ab526 100644
--- a/digiplan/static/scss/layouts/_panel.scss
+++ b/digiplan/static/scss/layouts/_panel.scss
@@ -143,6 +143,15 @@
       }
     }
 
+    &__calc-alert.panel-item__calc-alert--error {
+      @extend .border-danger;
+      background-color: $red-100;
+
+      .progress {
+        @extend .progress--error;
+      }
+    }
+
     &__tabs {
       .nav-tabs {
         @extend .pt-2;

From 5209fe42c820e2549f8b0f3688036006ea428efc Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Tue, 30 Apr 2024 13:25:06 +0100
Subject: [PATCH 05/14] add tooltips.scss

---
 digiplan/static/scss/app.scss                      | 1 +
 digiplan/templates/components/panel_5_results.html | 8 ++++++--
 digiplan/templates/map.html                        | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/digiplan/static/scss/app.scss b/digiplan/static/scss/app.scss
index 7b931e1a..7ae1a811 100644
--- a/digiplan/static/scss/app.scss
+++ b/digiplan/static/scss/app.scss
@@ -22,6 +22,7 @@
 @import 'components/progress';
 @import 'components/scenarios';
 @import 'components/tabs';
+@import 'components/tooltips';
 @import 'components/top-nav';
 @import 'components/sliders';
 @import 'components/widgets';
diff --git a/digiplan/templates/components/panel_5_results.html b/digiplan/templates/components/panel_5_results.html
index 13f1ad03..dbc8efe6 100644
--- a/digiplan/templates/components/panel_5_results.html
+++ b/digiplan/templates/components/panel_5_results.html
@@ -5,8 +5,12 @@
     <div class="panel-item__calc-alert">
       <div class="panel-item__calc-alert-message">{% translate "Detailergebnisse werden berechnet" %}</div>
       <div class="panel-item__calc-alert-explanation">
-        <button type="button" class="btn btn-link btn-sm" data-bs-toggle="tooltip" data-bs-placement="right" title="{% translate "Es werden komplexe Modelle verwendet, um Ihre Daten präzise zu analysieren. Diese tiefgehenden Berechnungen benötigen Zeit, um Ihnen zuverlässige und genaue Ergebnisse zu liefern." %}">
-          {% translate "Warum?" %}
+        <button type="button"
+                class="btn btn-link btn-sm"
+                data-bs-toggle="tooltip"
+                data-bs-placement="right"
+                title="{% translate "Es werden komplexe Modelle verwendet, um Ihre Daten präzise zu analysieren.<br>Diese tiefgehenden Berechnungen benötigen Zeit, um Ihnen zuverlässige und genaue Ergebnisse zu liefern." %}">
+                {% translate "Warum?" %}
         </button>
       </div>
       <div class="progress">
diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html
index d4272d73..eca03204 100644
--- a/digiplan/templates/map.html
+++ b/digiplan/templates/map.html
@@ -204,7 +204,7 @@
     <script src="{% static 'js/sliders.js' %}" type="module"></script>
     <script type="text/javascript">
       const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
-      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {html: true}))
     </script>
 
 {% endblock js_body %}

From 4f183c4ea8e92813701d06b0360f775c0013735a Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Tue, 30 Apr 2024 13:25:39 +0100
Subject: [PATCH 06/14] add tooltips.scss file

---
 digiplan/static/scss/components/_tooltips.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 digiplan/static/scss/components/_tooltips.scss

diff --git a/digiplan/static/scss/components/_tooltips.scss b/digiplan/static/scss/components/_tooltips.scss
new file mode 100644
index 00000000..afadbdf0
--- /dev/null
+++ b/digiplan/static/scss/components/_tooltips.scss
@@ -0,0 +1,15 @@
+.tooltip {
+  .tooltip-arrow::before {
+    @extend .d-none;
+  }
+  .tooltip-inner {
+    @extend .text-start;
+  }
+}
+
+.tooltip[data-popper-placement^='top'] .tooltip-arrow::before,
+.tooltip[data-popper-placement^='right'] .tooltip-arrow::before,
+.tooltip[data-popper-placement^='bottom'] .tooltip-arrow::before,
+.tooltip[data-popper-placement^='left'] .tooltip-arrow::before {
+  @extend .d-none;
+}
\ No newline at end of file

From 84637929a13d57e450f1823f813fdd2e07d29437 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Tue, 30 Apr 2024 16:31:02 +0100
Subject: [PATCH 07/14] move tooltip content in layer box to left side

---
 digiplan/templates/forms/layer.html              | 2 +-
 digiplan/templates/widgets/info_button_left.html | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 digiplan/templates/widgets/info_button_left.html

diff --git a/digiplan/templates/forms/layer.html b/digiplan/templates/forms/layer.html
index d75bfbcd..27fc4706 100644
--- a/digiplan/templates/forms/layer.html
+++ b/digiplan/templates/forms/layer.html
@@ -12,7 +12,7 @@
 
     <div class="map-layer__control">
       <div class="map-layer__control-i">
-        {% include 'widgets/info_button.html' with description=form.layer.description %}
+        {% include 'widgets/info_button_left.html' with description=form.layer.description %}
       </div>
       <div class="map-layer__control-toggle c-switch">
         <div class="form-check form-switch">
diff --git a/digiplan/templates/widgets/info_button_left.html b/digiplan/templates/widgets/info_button_left.html
new file mode 100644
index 00000000..99060272
--- /dev/null
+++ b/digiplan/templates/widgets/info_button_left.html
@@ -0,0 +1,2 @@
+{% load static %}
+<img src="{% static 'images/icons/i_info.svg' %}" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" data-bs-placement="left" title="{{description}}">
\ No newline at end of file

From b2225771fe9d1014c1823ade2ee8bf149b284f81 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Tue, 30 Apr 2024 18:36:20 +0100
Subject: [PATCH 08/14] add chart skeletons

---
 digiplan/static/scss/app.scss                 |  1 +
 .../static/scss/components/_skeletons.scss    | 99 +++++++++++++++++++
 .../templates/components/results_view.html    | 91 +++++++++++++++++
 3 files changed, 191 insertions(+)
 create mode 100644 digiplan/static/scss/components/_skeletons.scss

diff --git a/digiplan/static/scss/app.scss b/digiplan/static/scss/app.scss
index 7ae1a811..c636ef3e 100644
--- a/digiplan/static/scss/app.scss
+++ b/digiplan/static/scss/app.scss
@@ -21,6 +21,7 @@
 @import 'components/popup';
 @import 'components/progress';
 @import 'components/scenarios';
+@import 'components/skeletons';
 @import 'components/tabs';
 @import 'components/tooltips';
 @import 'components/top-nav';
diff --git a/digiplan/static/scss/components/_skeletons.scss b/digiplan/static/scss/components/_skeletons.scss
new file mode 100644
index 00000000..5862729a
--- /dev/null
+++ b/digiplan/static/scss/components/_skeletons.scss
@@ -0,0 +1,99 @@
+$skeleton-height-text: 0.875rem;
+$skeleton-bg-color: #C3D1DB;
+$skeleton-bg-color-light: #d8e2e9;
+$skeleton-border-radius: 4px;
+$skeleton-border-radius-none: 0;
+
+@mixin skeleton-style($skeleton-element-height, $skeleton-element-width, $skeleton-element-bg-color, $skeleton-element-border-radius) {
+  height: $skeleton-element-height;
+  width: $skeleton-element-width;
+  background-color: $skeleton-element-bg-color;
+  border-radius: $skeleton-element-border-radius;
+}
+
+.skeleton.skeleton--chart {
+  @extend .mt-2;
+  @extend .mb-4;
+
+  .skeleton {
+    &__title {
+      @extend .mb-1;
+      @include skeleton-style($skeleton-height-text, 8rem, $skeleton-bg-color-light, $skeleton-border-radius);
+    }
+
+    &__chart {
+      @extend .row;
+      @extend .mb-3;
+      height: 12rem;
+    }
+
+    &__chart-yaxis {
+      @extend .col-3;
+      @extend .d-flex;
+      @extend .flex-column;
+      @extend .justify-content-around;
+      @extend .pe-1;
+      @extend .pt-2;
+    }
+
+    &__chart-yaxis-value {
+      @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+    }
+
+    &__chart-bars {
+      @extend .col-6;
+      @extend .d-flex;
+      @extend .flex-column;
+      @extend .justify-content-around;
+      @extend .ps-1;
+      @extend .pt-2;
+      @extend .border-bottom;
+      @extend .border-start;
+    }
+
+    &__chart-bar {
+      @include skeleton-style(1.5rem, 66%, $skeleton-bg-color, $skeleton-border-radius-none);
+    }
+
+    &__chart-bar:first-of-type {
+      width: 33%;
+    }
+
+    &__chart-bar:last-of-type {
+      width: 100%;
+    }
+
+    &__chart-xaxis-legend {
+      @extend .col-3;
+      @extend .d-flex;
+      @extend .flex-column;
+      @extend .justify-content-end;
+      @extend .ps-1;
+
+      & > div {
+        @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      }
+    }
+
+    &__legend {
+      @extend .row;
+    }
+
+    &__legend-item {
+      @extend .col-4;
+      @extend .d-flex;
+      @extend .flex-row;
+      @extend .pe-3;
+      @extend .mb-1;
+    }
+
+    &__legend-color {
+      @include skeleton-style($skeleton-height-text, $skeleton-height-text, $skeleton-bg-color, 100px);
+    }
+
+    &__legend-description {
+      @extend .ms-1;
+      @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+    }
+  }
+}
\ No newline at end of file
diff --git a/digiplan/templates/components/results_view.html b/digiplan/templates/components/results_view.html
index 733d35b0..fe4e9678 100644
--- a/digiplan/templates/components/results_view.html
+++ b/digiplan/templates/components/results_view.html
@@ -33,6 +33,97 @@ <h2>{% translate "Übersicht" %}</h2>
         </div>
       </div>
     </div>
+    <div class="results__container">
+      <div class="results__header">
+        <h2>{% translate "Detailergebnisse" %}</h2>
+      </div>
+      <div class="results__row">
+        <div class="results__item">
+          <div class="skeleton skeleton--chart">
+            <div class="skeleton__title"></div>
+            <div class="skeleton__chart">
+              <div class="skeleton__chart-yaxis">
+                <div class="skeleton__chart-yaxis-value"></div>
+                <div class="skeleton__chart-yaxis-value"></div>
+                <div class="skeleton__chart-yaxis-value"></div>
+              </div>
+              <div class="skeleton__chart-bars">
+                <div class="skeleton__chart-bar"></div>
+                <div class="skeleton__chart-bar"></div>
+                <div class="skeleton__chart-bar"></div>
+              </div>
+              <div class="skeleton__chart-xaxis-legend">
+                <div></div>
+              </div>
+            </div>
+            <div class="skeleton__legend">
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="results__item">
+          <div class="skeleton skeleton--chart">
+            <div class="skeleton__title"></div>
+            <div class="skeleton__chart">
+              <div class="skeleton__chart-yaxis">
+                <div class="skeleton__chart-yaxis-value"></div>
+                <div class="skeleton__chart-yaxis-value"></div>
+                <div class="skeleton__chart-yaxis-value"></div>
+              </div>
+              <div class="skeleton__chart-bars">
+                <div class="skeleton__chart-bar"></div>
+                <div class="skeleton__chart-bar"></div>
+                <div class="skeleton__chart-bar"></div>
+              </div>
+              <div class="skeleton__chart-xaxis-legend">
+                <div></div>
+              </div>
+            </div>
+            <div class="skeleton__legend">
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+              <div class="skeleton__legend-item">
+                <div class="skeleton__legend-color"></div>
+                <div class="skeleton__legend-description"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <div class="tab-pane fade show active" id="results-wind" role="tabpanel" aria-labelledby="results-wind-tab">
     <div class="main-results">

From b50affcc257d8ba72751f0625aa236b998157013 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Wed, 1 May 2024 12:14:23 +0100
Subject: [PATCH 09/14] add shimmer animation to skeleton

---
 .../static/scss/components/_skeletons.scss    | 84 +++++++++++--------
 1 file changed, 47 insertions(+), 37 deletions(-)

diff --git a/digiplan/static/scss/components/_skeletons.scss b/digiplan/static/scss/components/_skeletons.scss
index 5862729a..5f672280 100644
--- a/digiplan/static/scss/components/_skeletons.scss
+++ b/digiplan/static/scss/components/_skeletons.scss
@@ -9,38 +9,48 @@ $skeleton-border-radius-none: 0;
   width: $skeleton-element-width;
   background-color: $skeleton-element-bg-color;
   border-radius: $skeleton-element-border-radius;
+  animation: shimmer 1.5s infinite;
+  background: linear-gradient(to right, $skeleton-element-bg-color 25%, $gray-200, $skeleton-element-bg-color 75%);
+  background-size: 200% 100%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
 }
 
 .skeleton.skeleton--chart {
   @extend .mt-2;
   @extend .mb-4;
 
-  .skeleton {
-    &__title {
-      @extend .mb-1;
-      @include skeleton-style($skeleton-height-text, 8rem, $skeleton-bg-color-light, $skeleton-border-radius);
-    }
+  .skeleton__title {
+    @extend .mb-1;
+    @include skeleton-style($skeleton-height-text, 8rem, $skeleton-bg-color-light, $skeleton-border-radius);
+  }
 
-    &__chart {
-      @extend .row;
-      @extend .mb-3;
-      height: 12rem;
-    }
+  .skeleton__chart {
+    @extend .row;
+    @extend .mb-3;
+    height: 12rem;
 
-    &__chart-yaxis {
+    .skeleton__chart-yaxis {
       @extend .col-3;
       @extend .d-flex;
       @extend .flex-column;
       @extend .justify-content-around;
       @extend .pe-1;
       @extend .pt-2;
-    }
 
-    &__chart-yaxis-value {
-      @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      .skeleton__chart-yaxis-value {
+        @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      }
     }
 
-    &__chart-bars {
+    .skeleton__chart-bars {
       @extend .col-6;
       @extend .d-flex;
       @extend .flex-column;
@@ -49,21 +59,21 @@ $skeleton-border-radius-none: 0;
       @extend .pt-2;
       @extend .border-bottom;
       @extend .border-start;
-    }
 
-    &__chart-bar {
-      @include skeleton-style(1.5rem, 66%, $skeleton-bg-color, $skeleton-border-radius-none);
-    }
+      .skeleton__chart-bar {
+        @include skeleton-style(1.5rem, 66%, $skeleton-bg-color, $skeleton-border-radius-none);
+      }
 
-    &__chart-bar:first-of-type {
-      width: 33%;
-    }
+      .skeleton__chart-bar:first-of-type {
+        width: 33%;
+      }
 
-    &__chart-bar:last-of-type {
-      width: 100%;
+      .skeleton__chart-bar:last-of-type {
+        width: 100%;
+      }
     }
 
-    &__chart-xaxis-legend {
+    .skeleton__chart-xaxis-legend {
       @extend .col-3;
       @extend .d-flex;
       @extend .flex-column;
@@ -74,26 +84,26 @@ $skeleton-border-radius-none: 0;
         @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
       }
     }
+  }
 
-    &__legend {
-      @extend .row;
-    }
+  .skeleton__legend {
+    @extend .row;
 
-    &__legend-item {
+    .skeleton__legend-item {
       @extend .col-4;
       @extend .d-flex;
       @extend .flex-row;
       @extend .pe-3;
       @extend .mb-1;
-    }
 
-    &__legend-color {
-      @include skeleton-style($skeleton-height-text, $skeleton-height-text, $skeleton-bg-color, 100px);
-    }
+      .skeleton__legend-color {
+        @include skeleton-style($skeleton-height-text, $skeleton-height-text, $skeleton-bg-color, 100px);
+      }
 
-    &__legend-description {
-      @extend .ms-1;
-      @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      .skeleton__legend-description {
+        @extend .ms-1;
+        @include skeleton-style($skeleton-height-text, 100%, $skeleton-bg-color-light, $skeleton-border-radius);
+      }
     }
   }
-}
\ No newline at end of file
+}

From 13973ea22a6f9db221e640e5594862e3bdf9aa58 Mon Sep 17 00:00:00 2001
From: nesnoj <jonathan.amme@rl-institut.de>
Date: Wed, 1 May 2024 14:07:24 +0200
Subject: [PATCH 10/14] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f2d1c28..65fe0881 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe
 - scenario settings
 - additional slider marker
 - result chart arrow indicator
+- feedback during simulation: results progress bar and chart placeholders
 
 ### Changed
 - Adapt municipality label font size according to zoom level

From b32a8fcc9c4821fee7e5fee9e8e4336737a6ddfd Mon Sep 17 00:00:00 2001
From: nesnoj <jonathan.amme@rl-institut.de>
Date: Wed, 1 May 2024 14:11:05 +0200
Subject: [PATCH 11/14] Make lint happy

---
 digiplan/templates/widgets/info_button_left.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/digiplan/templates/widgets/info_button_left.html b/digiplan/templates/widgets/info_button_left.html
index 99060272..8748ae83 100644
--- a/digiplan/templates/widgets/info_button_left.html
+++ b/digiplan/templates/widgets/info_button_left.html
@@ -1,2 +1,2 @@
 {% load static %}
-<img src="{% static 'images/icons/i_info.svg' %}" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" data-bs-placement="left" title="{{description}}">
\ No newline at end of file
+<img src="{% static 'images/icons/i_info.svg' %}" alt="Info Icon" class="i-icon" data-bs-toggle="tooltip" data-bs-placement="left" title="{{description}}">

From f00c42ccfc0e1e293ec8617f5b418b980922e065 Mon Sep 17 00:00:00 2001
From: nesnoj <jonathan.amme@rl-institut.de>
Date: Wed, 1 May 2024 14:12:53 +0200
Subject: [PATCH 12/14] Make lint happy

---
 digiplan/static/scss/components/_progress.scss     | 2 +-
 digiplan/static/scss/components/_tooltips.scss     | 2 +-
 digiplan/templates/components/panel_5_results.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/digiplan/static/scss/components/_progress.scss b/digiplan/static/scss/components/_progress.scss
index 29ae5a80..e8657f3a 100644
--- a/digiplan/static/scss/components/_progress.scss
+++ b/digiplan/static/scss/components/_progress.scss
@@ -12,4 +12,4 @@
     @extend .bg-danger;
     background-color: rgba(229, 112, 127, var(--bs-bg-opacity)) !important;
   }
-}
\ No newline at end of file
+}
diff --git a/digiplan/static/scss/components/_tooltips.scss b/digiplan/static/scss/components/_tooltips.scss
index afadbdf0..cc045af6 100644
--- a/digiplan/static/scss/components/_tooltips.scss
+++ b/digiplan/static/scss/components/_tooltips.scss
@@ -12,4 +12,4 @@
 .tooltip[data-popper-placement^='bottom'] .tooltip-arrow::before,
 .tooltip[data-popper-placement^='left'] .tooltip-arrow::before {
   @extend .d-none;
-}
\ No newline at end of file
+}
diff --git a/digiplan/templates/components/panel_5_results.html b/digiplan/templates/components/panel_5_results.html
index dbc8efe6..c23fb217 100644
--- a/digiplan/templates/components/panel_5_results.html
+++ b/digiplan/templates/components/panel_5_results.html
@@ -165,4 +165,4 @@ <h2 class="panel-item__nav-header">{% translate "View" %}</h2>
       </ul>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>

From cce9b881d52777142a9e08b1af7e81ba9b65c216 Mon Sep 17 00:00:00 2001
From: Hendrik Huyskens <hendrik.huyskens@rl-institut.de>
Date: Mon, 6 May 2024 13:57:46 +0200
Subject: [PATCH 13/14] Show skeletons for non-ready result charts

---
 digiplan/static/js/charts.js                  | 156 +++++-------------
 digiplan/static/js/results.js                 |  25 ++-
 .../templates/components/results_view.html    | 130 ++++++---------
 digiplan/templates/map.html                   |   2 +-
 4 files changed, 103 insertions(+), 210 deletions(-)

diff --git a/digiplan/static/js/charts.js b/digiplan/static/js/charts.js
index 7dc05886..aa0d68a7 100644
--- a/digiplan/static/js/charts.js
+++ b/digiplan/static/js/charts.js
@@ -1,151 +1,75 @@
-// Goals & scenarios, initioalize charts
-
-// Results view, initiliaze charts
-// const detailed_overview_chart = echarts.init(document.getElementById("detailed_overview_chart"));
-const wind_capacity_chart = echarts.init(document.getElementById("wind_capacity_chart"));
-const wind_areas_chart = echarts.init(document.getElementById("wind_areas_chart"));
-const pv_ground_capacity_chart = echarts.init(document.getElementById("pv_ground_capacity_chart"));
-const pv_ground_areas_chart = echarts.init(document.getElementById("pv_ground_areas_chart"));
-const pv_roof_capacity_chart = echarts.init(document.getElementById("pv_roof_capacity_chart"));
-const pv_roof_areas_chart = echarts.init(document.getElementById("pv_roof_areas_chart"));
-
-const electricity_overview_chart = echarts.init(document.getElementById("electricity_overview_chart"));
-const electricity_autarky_chart = echarts.init(document.getElementById("electricity_autarky_chart"));
-// const mobility_overview_chart = echarts.init(document.getElementById("mobility_overview_chart"));
-// const mobility_THG_chart = echarts.init(document.getElementById("mobility_THG_chart"));
-const heat_decentralized_chart = echarts.init(document.getElementById("heat_decentralized_chart"));
-const heat_centralized_chart = echarts.init(document.getElementById("heat_centralized_chart"));
+export const preResultCharts = {
+  wind_capacity: "wind_capacity_chart",
+  wind_areas: "wind_areas_chart",
+  pv_ground_capacity: "pv_ground_capacity_chart",
+  pv_ground_areas: "pv_ground_areas_chart",
+  pv_roof_capacity: "pv_roof_capacity_chart",
+  pv_roof_areas: "pv_roof_areas_chart",
+};
 
 // Onboarding Charts
 const onboarding_wind_div = document.getElementById("onboarding_wind_chart");
 const onboarding_wind_chart = echarts.init(onboarding_wind_div);
-const onboarding_pv_ground_div = document.getElementById("onboarding_pv_ground_chart");
+const onboarding_wind_option = JSON.parse(
+  document.getElementById("onboarding_wind").textContent,
+);
+onboarding_wind_chart.setOption(onboarding_wind_option);
+
+const onboarding_pv_ground_div = document.getElementById(
+  "onboarding_pv_ground_chart",
+);
 const onboarding_pv_ground_chart = echarts.init(onboarding_pv_ground_div);
-const onboarding_pv_roof_div = document.getElementById("onboarding_pv_roof_chart");
+const onboarding_pv_ground_option = JSON.parse(
+  document.getElementById("onboarding_pv_ground").textContent,
+);
+onboarding_pv_ground_chart.setOption(onboarding_pv_ground_option);
+
+const onboarding_pv_roof_div = document.getElementById(
+  "onboarding_pv_roof_chart",
+);
 const onboarding_pv_roof_chart = echarts.init(onboarding_pv_roof_div);
+const onboarding_pv_roof_option = JSON.parse(
+  document.getElementById("onboarding_pv_roof").textContent,
+);
+onboarding_pv_roof_chart.setOption(onboarding_pv_roof_option);
 
 PubSub.subscribe(eventTopics.MENU_CHANGED, resizeCharts);
 
-// Styling variables
-/* const chart_tooltip = {
-  trigger: 'axis',
-  axisPointer: {
-  type: 'shadow'
-  }
-};
-const chart_bar_width_sm = 16;
-const chart_grid_goal = {
-  top: '10%',
-  left: '15%',
-  right: '15%',
-  bottom: '18%',
-  height: '120',
-  containLabel: true
-};
-const chart_grid_results = {
-  top: '10%',
-  left: '3%',
-  right: '25%',
-  bottom: '18%',
-  containLabel: true
-};
-const chart_text_style = {
-  fontFamily: "Roboto",
-  fontSize: 10,
-  //fontWeight: 300,
-  //color: '#002C50'
-};
-const chart_legend = {
-  show: true,
-  bottom: '0',
-  itemWidth: 10,
-  itemHeight: 10
-}; */
-
-// CHARTS -> defined in /map/charts/
-
-// get options for result view charts
-// const detailed_overview_option = JSON.parse(document.getElementById("detailed_overview").textContent);
-const wind_capacity_option = JSON.parse(document.getElementById("wind_capacity").textContent);
-const wind_areas_option = JSON.parse(document.getElementById("wind_areas").textContent);
-const pv_ground_capacity_option = JSON.parse(document.getElementById("pv_ground_capacity").textContent);
-const pv_ground_areas_option = JSON.parse(document.getElementById("pv_ground_areas").textContent);
-const pv_roof_capacity_option = JSON.parse(document.getElementById("pv_roof_capacity").textContent);
-const pv_roof_areas_option = JSON.parse(document.getElementById("pv_roof_areas").textContent);
-
-const electricity_overview_option = JSON.parse(document.getElementById("electricity_overview").textContent);
-const electricity_autarky_option = JSON.parse(document.getElementById("electricity_autarky").textContent);
-// const mobility_overview_option = JSON.parse(document.getElementById("mobility_overview").textContent);
-// const mobility_ghg_option = JSON.parse(document.getElementById("mobility_ghg").textContent);
-const heat_decentralized_option = JSON.parse(document.getElementById("heat_decentralized").textContent);
-const heat_centralized_option = JSON.parse(document.getElementById("heat_centralized").textContent);
-
-// get options for onboarding charts
-const onboarding_wind_option = JSON.parse(document.getElementById("onboarding_wind").textContent);
-const onboarding_pv_ground_option = JSON.parse(document.getElementById("onboarding_pv_ground").textContent);
-const onboarding_pv_roof_option = JSON.parse(document.getElementById("onboarding_pv_roof").textContent);
-
 function resizeCharts() {
   setTimeout(function () {
-    // detailed_overview_chart.resize();
-    wind_capacity_chart.resize();
-    wind_areas_chart.resize();
-    pv_ground_capacity_chart.resize();
-    pv_ground_areas_chart.resize();
-    pv_roof_capacity_chart.resize();
-    pv_roof_areas_chart.resize();
-    electricity_overview_chart.resize();
-    electricity_autarky_chart.resize();
-    // mobility_overview_chart.resize();
-    // mobility_THG_chart.resize();
-    heat_decentralized_chart.resize();
-    heat_centralized_chart.resize();
+    for (const preResultChart of Object.values(preResultCharts)) {
+      const chartDiv = document.getElementById(preResultChart);
+      const chart = echarts.getInstanceByDom(chartDiv);
+      if (chart !== undefined) {
+        chart.resize();
+      }
+    }
     onboarding_wind_chart.resize();
     onboarding_pv_ground_chart.resize();
     onboarding_pv_roof_chart.resize();
   }, 200);
 }
 
-// Results, setOptions
-// detailed_overview_chart.setOption(detailed_overview_option);
-wind_capacity_chart.setOption(wind_capacity_option);
-wind_areas_chart.setOption(wind_areas_option);
-pv_ground_capacity_chart.setOption(pv_ground_capacity_option);
-pv_ground_areas_chart.setOption(pv_ground_areas_option);
-pv_roof_capacity_chart.setOption(pv_roof_capacity_option);
-pv_roof_areas_chart.setOption(pv_roof_areas_option);
-electricity_overview_chart.setOption(electricity_overview_option);
-electricity_autarky_chart.setOption(electricity_autarky_option);
-// mobility_overview_chart.setOption(mobility_overview_option);
-// mobility_THG_chart.setOption(mobility_ghg_option);
-heat_decentralized_chart.setOption(heat_decentralized_option);
-heat_centralized_chart.setOption(heat_centralized_option);
-
-// onboarding Charts
-onboarding_wind_chart.setOption(onboarding_wind_option);
-onboarding_pv_ground_chart.setOption(onboarding_pv_ground_option);
-onboarding_pv_roof_chart.setOption(onboarding_pv_roof_option);
-
 resizeCharts();
 
 window.addEventListener("resize", resizeCharts);
 document.addEventListener("show.bs.tab", resizeCharts);
 
-
-function createChart(div_id, options) {
+export function createChart(div_id, options) {
   const chartElement = document.getElementById(div_id);
+  chartElement.innerHTML = "";
   let chart;
   if (echarts.getInstanceByDom(chartElement)) {
-    chart =  echarts.getInstanceByDom(chartElement);
+    chart = echarts.getInstanceByDom(chartElement);
     chart.clear();
   } else {
-    chart = echarts.init(chartElement, null, {renderer: 'svg'});
+    chart = echarts.init(chartElement, null, { renderer: "svg" });
   }
   chart.setOption(options);
   chart.resize();
 }
 
-function clearChart(div_id) {
+export function clearChart(div_id) {
   const chartElement = document.getElementById(div_id);
   if (echarts.getInstanceByDom(chartElement)) {
     const chart = echarts.getInstanceByDom(chartElement);
diff --git a/digiplan/static/js/results.js b/digiplan/static/js/results.js
index 9e2cfac8..ba2073d0 100644
--- a/digiplan/static/js/results.js
+++ b/digiplan/static/js/results.js
@@ -1,4 +1,5 @@
 import { statusquoDropdown, futureDropdown } from "./elements.js";
+import { preResultCharts, createChart, clearChart } from "./charts.js";
 
 const imageResults = document.getElementById("info_tooltip_results");
 const resultSimNote = document.getElementById("result_simnote");
@@ -19,15 +20,6 @@ const PRE_RESULTS = [
   "heat_demand_capita_2045",
 ];
 
-const preResultCharts = {
-  wind_capacity: "wind_capacity_chart",
-  wind_areas: "wind_areas_chart",
-  pv_ground_capacity: "pv_ground_capacity_chart",
-  pv_ground_areas: "pv_ground_areas_chart",
-  pv_roof_capacity: "pv_roof_capacity_chart",
-  pv_roof_areas: "pv_roof_areas_chart",
-};
-
 const resultCharts = {};
 
 const SUMMARY_PRE_RESULTS = [
@@ -68,6 +60,7 @@ futureDropdown.addEventListener("change", function () {
 });
 
 // Subscriptions
+PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, showResultSkeletons);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, storePreResults);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, showPreResultCharts);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, showSummaryPreResults);
@@ -230,3 +223,17 @@ function showSummaryResults(summaries = []) {
     },
   });
 }
+
+function showResultSkeletons(msg) {
+  const skeleton_template = document.getElementById("result_skeleton");
+  for (const chart_div_id of Object.values(preResultCharts)) {
+    const chart_div = document.getElementById(chart_div_id);
+    const chart = echarts.getInstanceByDom(chart_div);
+    if (chart !== undefined) {
+      chart.dispose();
+    }
+    const skeleton = skeleton_template.content.cloneNode(true);
+    chart_div.appendChild(skeleton);
+  }
+  return logMessage(msg);
+}
diff --git a/digiplan/templates/components/results_view.html b/digiplan/templates/components/results_view.html
index fe4e9678..3f9be0d4 100644
--- a/digiplan/templates/components/results_view.html
+++ b/digiplan/templates/components/results_view.html
@@ -1,4 +1,48 @@
 {% load i18n %}
+
+<template id="result_skeleton">
+  <div class="skeleton skeleton--chart">
+    <div class="skeleton__title"></div>
+    <div class="skeleton__chart">
+      <div class="skeleton__chart-yaxis">
+        <div class="skeleton__chart-yaxis-value"></div>
+        <div class="skeleton__chart-yaxis-value"></div>
+        <div class="skeleton__chart-yaxis-value"></div>
+      </div>
+      <div class="skeleton__chart-bars">
+        <div class="skeleton__chart-bar"></div>
+        <div class="skeleton__chart-bar"></div>
+        <div class="skeleton__chart-bar"></div>
+      </div>
+      <div class="skeleton__chart-xaxis-legend">
+        <div></div>
+      </div>
+    </div>
+    <div class="skeleton__legend">
+      <div class="skeleton__legend-item">
+        <div class="skeleton__legend-color"></div>
+        <div class="skeleton__legend-description"></div>
+      </div>
+      <div class="skeleton__legend-item">
+        <div class="skeleton__legend-color"></div>
+        <div class="skeleton__legend-description"></div>
+      </div>
+      <div class="skeleton__legend-item">
+        <div class="skeleton__legend-color"></div>
+        <div class="skeleton__legend-description"></div>
+      </div>
+      <div class="skeleton__legend-item">
+        <div class="skeleton__legend-color"></div>
+        <div class="skeleton__legend-description"></div>
+      </div>
+      <div class="skeleton__legend-item">
+        <div class="skeleton__legend-color"></div>
+        <div class="skeleton__legend-description"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <div class="tab-content" id="results-content">
   <div class="tab-pane fade" id="results-overview" role="tabpanel" aria-labelledby="results-overview-tab">
     <div class="main-results">
@@ -38,90 +82,8 @@ <h2>{% translate "Übersicht" %}</h2>
         <h2>{% translate "Detailergebnisse" %}</h2>
       </div>
       <div class="results__row">
-        <div class="results__item">
-          <div class="skeleton skeleton--chart">
-            <div class="skeleton__title"></div>
-            <div class="skeleton__chart">
-              <div class="skeleton__chart-yaxis">
-                <div class="skeleton__chart-yaxis-value"></div>
-                <div class="skeleton__chart-yaxis-value"></div>
-                <div class="skeleton__chart-yaxis-value"></div>
-              </div>
-              <div class="skeleton__chart-bars">
-                <div class="skeleton__chart-bar"></div>
-                <div class="skeleton__chart-bar"></div>
-                <div class="skeleton__chart-bar"></div>
-              </div>
-              <div class="skeleton__chart-xaxis-legend">
-                <div></div>
-              </div>
-            </div>
-            <div class="skeleton__legend">
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="results__item">
-          <div class="skeleton skeleton--chart">
-            <div class="skeleton__title"></div>
-            <div class="skeleton__chart">
-              <div class="skeleton__chart-yaxis">
-                <div class="skeleton__chart-yaxis-value"></div>
-                <div class="skeleton__chart-yaxis-value"></div>
-                <div class="skeleton__chart-yaxis-value"></div>
-              </div>
-              <div class="skeleton__chart-bars">
-                <div class="skeleton__chart-bar"></div>
-                <div class="skeleton__chart-bar"></div>
-                <div class="skeleton__chart-bar"></div>
-              </div>
-              <div class="skeleton__chart-xaxis-legend">
-                <div></div>
-              </div>
-            </div>
-            <div class="skeleton__legend">
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-              <div class="skeleton__legend-item">
-                <div class="skeleton__legend-color"></div>
-                <div class="skeleton__legend-description"></div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div class="results__item"></div>
+        <div class="results__item"></div>
       </div>
     </div>
   </div>
diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html
index eca03204..92c99450 100644
--- a/digiplan/templates/map.html
+++ b/digiplan/templates/map.html
@@ -197,9 +197,9 @@
       <script src="{% static 'js/intro_tour.js' %}" type="text/javascript"></script>
     {% endif %}
     <script src="{% static 'js/state.js' %}" type="text/javascript"></script>
-    <script src="{% static 'js/charts.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/layers-box.js' %}"></script>
   {% endcompress %}
+    <script src="{% static 'js/charts.js' %}" type="module"></script>
     <script src="{% static 'js/results.js' %}" type="module"></script>
     <script src="{% static 'js/sliders.js' %}" type="module"></script>
     <script type="text/javascript">

From ce41aa3fee2ad8fffd01592980636655c8fff537 Mon Sep 17 00:00:00 2001
From: nesnoj <jonathan.amme@rl-institut.de>
Date: Mon, 6 May 2024 16:56:57 +0200
Subject: [PATCH 14/14] Comment-out progress bar

---
 digiplan/templates/components/panel_5_results.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/digiplan/templates/components/panel_5_results.html b/digiplan/templates/components/panel_5_results.html
index c23fb217..deb6d49d 100644
--- a/digiplan/templates/components/panel_5_results.html
+++ b/digiplan/templates/components/panel_5_results.html
@@ -2,7 +2,7 @@
 
 <div class="panel__settings panel__settings--padding">
   <div class="panel-item">
-    <div class="panel-item__calc-alert">
+    <!--<div class="panel-item__calc-alert">
       <div class="panel-item__calc-alert-message">{% translate "Detailergebnisse werden berechnet" %}</div>
       <div class="panel-item__calc-alert-explanation">
         <button type="button"
@@ -16,7 +16,7 @@
       <div class="progress">
         <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
       </div>
-    </div>
+    </div>-->
     <div class="panel-item__form">
       <select id="result_views" class="form-select" aria-label="Default select example">
         <option value="" title="{% translate "Keine Auswahl" %}" selected>{% translate "Keine Auswahl" %}</option>