Skip to content

Commit

Permalink
increase performance by polyfilling ResizeObserver only if required
Browse files Browse the repository at this point in the history
  • Loading branch information
undergroundwires committed Mar 25, 2021
1 parent ac2249f commit 448e378
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions src/presentation/components/Shared/Responsive.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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();
}
Expand Down

0 comments on commit 448e378

Please sign in to comment.