From 448e378dc4501f9de69af63634c87d0e5060bf52 Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Thu, 25 Mar 2021 13:24:19 +0100
Subject: [PATCH] increase performance by polyfilling ResizeObserver only if
 required

---
 src/presentation/components/Shared/Responsive.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/presentation/components/Shared/Responsive.vue b/src/presentation/components/Shared/Responsive.vue
index 1965998e..01d33003 100644
--- a/src/presentation/components/Shared/Responsive.vue
+++ b/src/presentation/components/Shared/Responsive.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { Component, Vue, Emit } from 'vue-property-decorator';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { throttle } from './Throttle';
 
 @Component
@@ -16,11 +15,17 @@ export default class Responsive extends Vue {
   private observer: ResizeObserver;
   private get container(): HTMLElement { return this.$refs.containerElement as HTMLElement; }
 
-  public mounted() {
+  public async mounted() {
     this.width = this.container.offsetWidth;
     this.height = this.container.offsetHeight;
     const resizeCallback = throttle(() => this.updateSize(), 200);
-    this.observer = new ResizeObserver(resizeCallback);
+
+    if ('ResizeObserver' in window === false) {
+      const module = await import('@juggle/resize-observer');
+      window.ResizeObserver = module.ResizeObserver;
+    }
+
+    this.observer = new window.ResizeObserver(resizeCallback);
     this.observer.observe(this.container);
     this.fireChangeEvents();
   }