move calculation from grid to grid item

webapp/components/MasonryGrid/MasonryGrid.vue

@@ -1,10 +1,11 @@
 <template>
   <ds-grid
     :min-column-width="300"
-    v-on:grid-item-mounted="calculateItemHeight"
+    v-on:calculating-item-height="startCalculation"
-    class="reset-grid-height"
+    v-on:finished-calculating-item-height="endCalculation"
+    :class="[itemsCalculating ? 'reset-grid-height' : '']"
   >
-    <slot :rowSpan="rowSpan">Loading...</slot>
+    <slot></slot>
   </ds-grid>
 </template>
 
@@ -12,24 +13,31 @@
 export default {
   data() {
     return {
-      rowSpan: 10,
+      itemsCalculating: 0,
-      rowHeight: null,
     }
   },
+  computed: {
+    rowHeight() {
+      if (this.$el) {
+        return parseInt(this.$el.style.gridAutoRows)
+      }
+      return 0
+    },
+    rowGap() {
+      if (this.$el) {
+        return parseInt(this.$el.style.gridRowGap)
+      }
+      return 0
+    },
+  },
   methods: {
-    calculateItemHeight(gridItem) {
+    startCalculation() {
-      const grid = this.$el
+      this.itemsCalculating += 1
-      const rowHeight = this.rowHeight
+      return { rowHeight: this.rowHeight, rowGap: this.rowGap }
-      const rowGap = parseInt(grid.style.gridRowGap)
-
-      const itemHeight = gridItem.$el.clientHeight
-      const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
-      gridItem.rowSpan = rowSpan
     },
+    endCalculation() {
+      this.itemsCalculating -= 1
     },
-  mounted() {
-    this.rowHeight = parseInt(this.$el.style.gridAutoRows)
-    this.$el.classList.remove('reset-grid-height')
   },
 }
 </script>

webapp/components/MasonryGrid/MasonryGridItem.vue

@@ -8,21 +8,30 @@
 export default {
   data() {
     return {
-      span: 10,
+      rowSpan: 10,
     }
   },
-  computed: {
+  methods: {
-    rowSpan: {
+    calculateItemHeight() {
-      get() {
+      const grid = this.$parent.$emit('calculating-item-height')
-        return this.span
+      this.$nextTick(() => {
-      },
+        const rowHeight = parseInt(grid.$el.style.gridAutoRows)
-      set(rowSpan) {
+        const rowGap = parseInt(grid.$el.style.gridRowGap)
-        this.span = rowSpan
+
-      },
+        const itemHeight = this.$el.clientHeight
+        const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
+        this.rowSpan = rowSpan
+        this.$parent.$emit('finished-calculating-item-height')
+      })
     },
   },
   mounted() {
-    this.$parent.$emit('grid-item-mounted', this)
+    const image = this.$el.querySelector('img')
+    if (image) {
+      image.onload = () => this.calculateItemHeight()
+    } else {
+      setTimeout(() => this.calculateItemHeight(), 0)
+    }
   },
 }
 </script>

webapp/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <masonry-grid v-slot="{ rowSpan }">
+    <masonry-grid>
       <ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
@@ -15,7 +15,7 @@
           ></ds-select>
         </div>
       </ds-grid-item>
-      <masonry-grid-item v-for="post in posts" :key="post.id" :rowSpan="rowSpan">
+      <masonry-grid-item v-for="post in posts" :key="post.id">
         <hc-post-card
           :post="post"
           :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"