From 12766ddfae38302cd4a08791074d2ec98cd30849 Mon Sep 17 00:00:00 2001 From: Novout Date: Mon, 13 Jun 2022 01:21:27 +0100 Subject: [PATCH] feat(editor): absolute loader for edge cases --- .../src/components/material/Spinner.vue | 2 +- .../page/editor/absolute/EditorAbsoluteLoader.vue | 7 +++++++ .../page/editor/provider/ProviderEditor.vue | 1 + packages/better-write-app/src/store/absolute.ts | 1 + packages/better-write-app/src/use/cycle.ts | 13 ++++++++++++- packages/better-write-app/src/use/graph.ts | 8 ++++++++ packages/better-write-app/windi.config.ts | 3 ++- packages/better-write-types/src/types/absolute.ts | 1 + 8 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 packages/better-write-app/src/components/page/editor/absolute/EditorAbsoluteLoader.vue diff --git a/packages/better-write-app/src/components/material/Spinner.vue b/packages/better-write-app/src/components/material/Spinner.vue index 346b2ccfe..c0f4bf4a5 100644 --- a/packages/better-write-app/src/components/material/Spinner.vue +++ b/packages/better-write-app/src/components/material/Spinner.vue @@ -1,6 +1,6 @@ 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 index 29681acaf..267e39da9 100644 --- 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 @@ + diff --git a/packages/better-write-app/src/store/absolute.ts b/packages/better-write-app/src/store/absolute.ts index ce4fb0c3e..88670a225 100644 --- 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 index f4aeb6c46..471571318 100644 --- 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 index 2d603c0a8..419bed95b 100644 --- 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, 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 index 076a6312e..b9c576e00 100644 --- 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 index 20d94c652..233805f81 100644 --- 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 }