feat(theme): disable transitions during theme switch

dvcol · Feb 10, 2025 · 58e0d77 · 58e0d77
1 parent d0512fe
commit 58e0d77
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/src/lib/providers/neo-theme-provider-context.svelte.ts b/src/lib/providers/neo-theme-provider-context.svelte.ts
@@ -1,3 +1,4 @@
+import { wait } from '@dvcol/common-utils/common/promise';
 import { getContext, setContext, untrack } from 'svelte';
 
 import {
@@ -73,14 +74,32 @@ export class NeoThemeProviderContext implements INeoThemeProviderContext {
     });
   }
 
+  private async setTheme(theme: INeoThemeProviderContext['theme']) {
+    if (!this.root) throw new NeoErrorThemeTargetNotFound();
+    if (!('setAttribute' in this.root)) throw new NeoErrorThemeInvalidTarget();
+    if (this.theme === this.root.getAttribute(NeoThemeStorageKey.Theme)) return;
+
+    this.root.setAttribute(NeoThemeStorageKey.Transition, 'false');
+    this.root.setAttribute(NeoThemeStorageKey.Theme, theme);
+    await wait();
+    this.root.removeAttribute(NeoThemeStorageKey.Transition);
+  }
+
+  private setSource(source: INeoThemeProviderContext['source']) {
+    if (!this.root) throw new NeoErrorThemeTargetNotFound();
+    if (!('setAttribute' in this.root)) throw new NeoErrorThemeInvalidTarget();
+    if (this.source === this.root.getAttribute(NeoThemeStorageKey.Source)) return;
+
+    this.root.setAttribute(NeoThemeStorageKey.Source, source);
+  }
+
   sync() {
     if (!this.root) throw new NeoErrorThemeTargetNotFound();
     if (!('setAttribute' in this.root)) throw new NeoErrorThemeInvalidTarget();
 
     this.root.setAttribute(NeoThemeRoot, '');
-
-    this.root.setAttribute(NeoThemeStorageKey.Theme, this.theme);
-    this.root.setAttribute(NeoThemeStorageKey.Source, this.source);
+    this.setTheme(this.theme);
+    this.setSource(this.source);
 
     if (this.reset) this.root.setAttribute(NeoThemeStorageKey.Reset, '');
     else this.root.removeAttribute(NeoThemeStorageKey.Reset);

diff --git a/src/lib/providers/neo-theme-provider.model.ts b/src/lib/providers/neo-theme-provider.model.ts
@@ -87,11 +87,12 @@ export type NeoThemeProviderProps = {
 
 export const NeoThemeRoot = 'neo-theme-root';
 
-export const NeoThemeStorageKey: Record<string, `neo-${keyof INeoThemeProviderContext}`> = {
+export const NeoThemeStorageKey: Record<string, `neo-${keyof INeoThemeProviderContext | 'transition'}`> = {
   Reset: 'neo-reset' as const,
   Theme: 'neo-theme' as const,
   Source: 'neo-source' as const,
   Remember: 'neo-remember' as const,
+  Transition: 'neo-transition' as const,
 } as const;
 
 export type NeoThemeStorageKeys = (typeof NeoThemeStorageKey)[keyof typeof NeoThemeStorageKey];

diff --git a/src/lib/styles/theme.scss b/src/lib/styles/theme.scss
@@ -31,6 +31,14 @@
       background-color: var(--neo-text-highlight-color);
     }
 
+    &[neo-transition='false'] {
+      *,
+      *::before,
+      *::after {
+        transition: none !important;
+      }
+    }
+
     /* override semantic color if dark mode is enabled */
     &[neo-theme='dark'] {
       @include colors.dark-theme;