From b79b61a1849e0fadf924c6362a364acde3e35e4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 30 Jan 2024 13:07:23 +0100
Subject: [PATCH] Fix initial render sometimes not being responsive on metric,
 calendar and cmap

---
 .../components/PageBlocks/CalendarBase.vue    | 21 +++++++------------
 .../src/components/PageBlocks/MetricBase.vue  |  8 +++++--
 lib/vue/src/components/map/CMap.vue           |  4 +++-
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/CalendarBase.vue b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
index b151f6cd9..6ff46e946 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarBase.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
@@ -76,7 +76,7 @@
 
       <div
         :ref="`cc-${blockIndex}`"
-        class="h-100"
+        class="d-flex flex-column flex-fill"
       >
         <div
           v-if="processing"
@@ -86,12 +86,13 @@
         </div>
 
         <full-calendar
-          v-show="show && !processing"
+          v-show="!processing"
           :ref="`fc-${blockIndex}`"
           :key="key"
           :height="getHeight()"
           :events="events"
           v-bind="config"
+          class="flex-fill"
           @eventClick="handleEventClick"
         />
       </div>
@@ -222,9 +223,7 @@ export default {
     'block.xywh': {
       deep: true,
       handler () {
-        setTimeout(() => {
-          this.updateSize()
-        })
+        this.updateSize()
       },
     },
   },
@@ -249,11 +248,9 @@ export default {
       findModuleByID: 'module/findByID',
     }),
 
-    async updateSize () {
-      this.show = false
-
-      await this.$nextTick(() => {
-        this.show = true
+    updateSize () {
+      this.$nextTick(() => {
+        this.api().updateSize()
       })
     },
 
@@ -350,9 +347,7 @@ export default {
           this.processing = false
           this.refreshing = false
 
-          setTimeout(() => {
-            this.updateSize()
-          })
+          this.updateSize()
         })
     },
 
diff --git a/client/web/compose/src/components/PageBlocks/MetricBase.vue b/client/web/compose/src/components/PageBlocks/MetricBase.vue
index 31bfc7db5..da1d99f1a 100644
--- a/client/web/compose/src/components/PageBlocks/MetricBase.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricBase.vue
@@ -178,9 +178,13 @@ export default {
         }
 
         this.reports = rtr
-        this.processing = false
+        this.$nextTick(() => {
+          this.processing = false
+        })
       } catch {
-        this.processing = false
+        this.$nextTick(() => {
+          this.processing = false
+        })
       }
     },
     /**
diff --git a/lib/vue/src/components/map/CMap.vue b/lib/vue/src/components/map/CMap.vue
index 8db85f2bc..688bf2a6e 100644
--- a/lib/vue/src/components/map/CMap.vue
+++ b/lib/vue/src/components/map/CMap.vue
@@ -282,7 +282,9 @@ export default {
 
     onBoundsUpdate (value) {
       this.$nextTick(() => {
-        this.$refs.map.mapObject.invalidateSize()
+        setTimeout(() => {
+          this.$refs.map.mapObject.invalidateSize()
+        }, 100)
       })
 
       value = value || this.$refs.map.mapObject.getBounds()