feat(editor): absolute loader for edge cases

Novout · Jun 13, 2022 · 12766dd · 12766dd
1 parent 20deaed
commit 12766dd
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 3 deletions.
diff --git a/packages/better-write-app/src/components/material/Spinner.vue b/packages/better-write-app/src/components/material/Spinner.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center justify-center w-full">
-    <HeroIcon class="wb-icon animate-spin">
+    <HeroIcon class="wb-spinner animate-spin">
       <svg
         :width="width"
         :height="height"

diff --git a/packages/better-write-app/src/components/page/editor/absolute/EditorAbsoluteLoader.vue b/packages/better-write-app/src/components/page/editor/absolute/EditorAbsoluteLoader.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="fixed flex cursor-wait justify-center items-center top-0 left-0 z-umax w-full h-screen bg-modal"
+  >
+    <Spinner :width="100" :height="100" />
+  </div>
+</template>
diff --git a/packages/better-write-app/src/components/page/editor/provider/ProviderEditor.vue b/packages/better-write-app/src/components/page/editor/provider/ProviderEditor.vue
@@ -19,6 +19,7 @@
     <EditorToolsSpeechRecognition v-if="ABSOLUTE.tools.speechRecognition" />
     <EditorLiveCreate v-else-if="ABSOLUTE.live.create" />
     <EditorLiveEnter v-else-if="ABSOLUTE.live.enter" />
+    <EditorAbsoluteLoader v-else-if="ABSOLUTE.spinner" />
   </teleport>
 </template>
 

diff --git a/packages/better-write-app/src/store/absolute.ts b/packages/better-write-app/src/store/absolute.ts
@@ -50,6 +50,7 @@ export const useAbsoluteStore = defineStore('absolute', {
         create: false,
         enter: false,
       },
+      spinner: false,
     }
   },
 })
diff --git a/packages/better-write-app/src/use/cycle.ts b/packages/better-write-app/src/use/cycle.ts
@@ -1,11 +1,14 @@
 import { useContextStore } from '@/store/context'
 import { useProjectStore } from '@/store/project'
 import { nextTick } from 'vue'
+import { useUtils } from './utils'
 
 export const useCycle = () => {
   const PROJECT = useProjectStore()
   const CONTEXT = useContextStore()
 
+  const utils = useUtils()
+
   const update = async () => {
     await nextTick
 
@@ -14,9 +17,17 @@ export const useCycle = () => {
     await nextTick
   }
 
+  const forceNextTick = async () => {
+    await nextTick
+
+    await utils.delay(20)
+
+    await nextTick
+  }
+
   const awaitedOnMounted = (fn: () => void) => {
     setTimeout(() => fn())
   }
 
-  return { update, awaitedOnMounted }
+  return { update, forceNextTick, awaitedOnMounted }
 }
diff --git a/packages/better-write-app/src/use/graph.ts b/packages/better-write-app/src/use/graph.ts
@@ -7,6 +7,7 @@ import { useProjectStore } from '@/store/project'
 import { ID, ContextState, Entity } from 'better-write-types'
 import { useStorage } from './storage/storage'
 import { useEditorStore } from '@/store/editor'
+import { useCycle } from './cycle'
 
 export const useGraph = () => {
   const CONTEXT = useContextStore()
@@ -17,6 +18,7 @@ export const useGraph = () => {
   const scroll = useScroll()
   const storage = useStorage()
   const breakpoints = useBreakpoints(breakpointsTailwind)
+  const cycle = useCycle()
 
   const utils = () => {
     const mobile = () => {
@@ -53,9 +55,15 @@ export const useGraph = () => {
   }
 
   const to = async (index: ID<number>, page: ContextState, entity: Entity) => {
+    ABSOLUTE.spinner = true
+
+    await cycle.forceNextTick()
+
     await load(index, page, entity)
 
     utils().mobile()
+
+    ABSOLUTE.spinner = false
   }
 
   const normalize = () => {

diff --git a/packages/better-write-app/windi.config.ts b/packages/better-write-app/windi.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
     'wb-base': 'bg-theme-background-1 w-full h-screen',
     'wb-title': 'text-4xl opacity-70 hover:text-theme-text-3 cursor-default',
     'wb-icon': 'text-theme-icon hover:text-theme-icon-hover active:text-theme-icon-active cursor-pointer',
+    'wb-spinner': 'text-theme-icon hover:text-theme-icon-hover active:text-theme-icon-active cursor-wait',
     'wb-text': 'text-theme-text-1',
     'wb-background-color': 'bg-theme-background-1',
     'wb-aside-button': 'text-2xs pl-2 transition w-full font-bold text-theme-text-2 rounded-none flex',
@@ -85,7 +86,7 @@ export default defineConfig({
       backgroundColor: theme => ({
         "black-opacity": 'rgba(0,0,0, 0.15)',
         "white-opacity": 'rgba(255,255,255, 0.1)',
-        "modal": 'rgba(0,0,0, 0.4)'
+        "modal": 'rgba(0,0,0, 0.7)'
       }),
       boxShadow: theme => ({
         "binset": `rgba(50, 50, 93, 0.4) 0px 2px 5px -1px, rgba(0, 0, 0, 0.65) 0px 1px 3px -1px;`,

diff --git a/packages/better-write-types/src/types/absolute.ts b/packages/better-write-types/src/types/absolute.ts
@@ -65,4 +65,5 @@ export interface AbsoluteState {
   tools: AbsoluteStateTools
   generator: AbsoluteStateGenerator
   live: AbsoluteStateLive
+  spinner: boolean
 }