refactor: defer mixin to composable

Author: Akryum

packages/app-frontend/src/features/inspector/StateInspector.vue

@@ -2,7 +2,7 @@
 import StateType from './StateType.vue'
 
 import Vue from 'vue'
-import Defer from '@front/mixins/defer'
+import { useDefer } from '@front/util/defer'
 
 const keyOrder = {
   props: 1,
@@ -30,10 +30,6 @@ export default {
     StateType,
   },
 
-  mixins: [
-    Defer(),
-  ],
-
   props: {
     state: {
       type: Object,
@@ -46,6 +42,14 @@ export default {
     },
   },
 
+  setup () {
+    const { defer } = useDefer()
+
+    return {
+      defer,
+    }
+  },
+
   data () {
     return {
       expandedState: {},

packages/app-frontend/src/features/timeline/TimelineEventList.vue

@@ -4,7 +4,6 @@ import TimelineEventListItem from './TimelineEventListItem.vue'
 
 import { computed, ref, watch, defineComponent } from '@vue/composition-api'
 import { getStorage, setStorage } from '@vue-devtools/shared-utils'
-import Defer from '@front/mixins/defer'
 import { useRoute, useRouter } from '@front/util/router'
 import { onKeyDown } from '@front/util/keyboard'
 import { useInspectedEvent, useSelectedEvent, selectEvent, useLayers } from './composable'
@@ -19,10 +18,6 @@ export default defineComponent({
     EmptyPane,
   },
 
-  mixins: [
-    Defer(),
-  ],
-
   setup () {
     const route = useRoute()
     const router = useRouter()

packages/app-frontend/src/mixins/defer.ts

@@ -0,0 +1,30 @@
+import { ref, onMounted } from '@vue/composition-api'
+
+export function useDefer (count = 10) {
+  const displayPriority = ref(0)
+
+  function step () {
+    requestAnimationFrame(() => {
+      displayPriority.value++
+      if (displayPriority.value < count) {
+        step()
+      }
+    })
+  }
+
+  function runDisplayPriority () {
+    step()
+  }
+
+  function defer (priority) {
+    return displayPriority.value >= priority
+  }
+
+  onMounted(() => {
+    runDisplayPriority()
+  })
+
+  return {
+    defer,
+  }
+}