Merge branch 'apology-fixes' into 'develop'

add a mask to load shape to flow text around quicker

Closes #1183

See merge request pleroma/pleroma-fe!1618

src/components/update_notification/update_notification.js

@@ -2,6 +2,8 @@ import Modal from 'src/components/modal/modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import pleromaTan from 'src/assets/pleromatan_apology.png'
 import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png'
+import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
+import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
 
 import {
   faTimes
@@ -25,8 +27,9 @@ const UpdateNotification = {
   },
   computed: {
     pleromaTanStyles () {
+      const mask = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
       return {
-        'shape-outside': 'url(' + this.pleromaTanVariant + ')'
+        'shape-outside': 'url(' + mask + ')'
       }
     },
     dynamicStyles () {
@@ -57,9 +60,14 @@ const UpdateNotification = {
     }
   },
   mounted () {
+    // Workaround to get the text height only after mask loaded. A bit hacky.
+    const newImg = new Image()
+    newImg.onload = () => {
       setTimeout(() => {
         this.contentHeight = this.$refs.animatedText.scrollHeight
-    }, 1000)
+      }, 100)
+    }
+    newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
   }
 }