Merge pull request #5750 from nextcloud/fix/request-animation-frame

fix(editor): requestAnimationFrame in onResize callbacks

src/components/Editor.vue

@@ -342,10 +342,12 @@ export default {
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
 		useResizeObserver(this.$el, (entries) => {
-			const entry = entries[0]
-			const { width } = entry.contentRect
-			const maxWidth = width - 36
-			this.$el.style.setProperty('--widget-full-width', `${maxWidth}px`)
+			window.requestAnimationFrame(() => {
+				const entry = entries[0]
+				const { width } = entry.contentRect
+				const maxWidth = width - 36
+				this.$el.style.setProperty('--widget-full-width', `${maxWidth}px`)
+			})
 		})
 		subscribe('text:translate-modal:show', this.showTranslateModal)
 	},

src/components/Editor/EditorOutline.vue

@@ -16,17 +16,12 @@
 </template>
 
 <script>
-import debounce from 'debounce'
 import { NcButton } from '@nextcloud/vue'
 import TableOfContents from './TableOfContents.vue'
 import { useOutlineStateMixin, useOutlineActions } from './Wrapper.provider.js'
 import { Close } from './../icons.js'
 import useStore from '../../mixins/store.js'
 
-const onResize = debounce((context) => {
-	context.mobile = context.$el.parentElement.clientWidth < 320
-}, 10)
-
 export default {
 	name: 'EditorOutline',
 	components: {
@@ -39,20 +34,22 @@ export default {
 		mobile: false,
 	}),
 	mounted() {
-		this.$onResize = () => {
-			onResize(this)
-		}
-
-		this.$resizeObserver = new ResizeObserver(this.$onResize)
+		this.$resizeObserver = new ResizeObserver(this.onResize)
 		this.$resizeObserver.observe(this.$el.parentElement)
-
-		this.$onResize()
+		this.onResize()
 	},
 	beforeDestroy() {
 		this.$resizeObserver.unobserve(this.$el.parentElement)
 		this.$resizeObserver = null
 		this.$onResize = null
 	},
+	methods: {
+		onResize([el]) {
+			window.requestAnimationFrame(() => {
+				this.mobile = el.clientWidth < 320
+			})
+		},
+	},
 }
 </script>
 

src/components/Menu/MenuBar.vue

@@ -197,17 +197,18 @@ export default {
 	},
 	methods: {
 		onResize(entries) {
-			const entry = entries[0]
-			const { width } = entry.contentRect
+			window.requestAnimationFrame(() => {
+				const entry = entries[0]
+				const { width } = entry.contentRect
 
-			// leave some buffer - this is necessary so the bar does not wrap during resizing
-			const spaceToFill = width - 4
-			const spacePerSlot = this.$isMobile ? 44 : 46
-			const slots = Math.floor(spaceToFill / spacePerSlot)
+				// leave some buffer - this is necessary so the bar does not wrap during resizing
+				const spaceToFill = width - 4
+				const spacePerSlot = this.$isMobile ? 44 : 46
+				const slots = Math.floor(spaceToFill / spacePerSlot)
 
-			// Leave one slot empty for the three dot menu
-			this.iconsLimit = slots - 1
-			this.isReady = true
+				// Leave one slot empty for the three dot menu
+				this.iconsLimit = slots - 1
+			})
 		},
 		showHelp() {
 			this.displayHelp = true