fix(ShikiCodeblocks): spoilers (#298)

* fix(ShikiCodeblocks): spoilers

* fix a settings bug i thikn

3 files changed, 25 insertions, 9 deletions

diff --git a/src/plugins/shikiCodeblocks/components/Highlighter.tsx b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
index d86e772..d26cd81 100644
--- a/src/plugins/shikiCodeblocks/components/Highlighter.tsx
+++ b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
@@ -46,9 +46,11 @@ export interface HighlighterProps {
 }
 
 export const createHighlighter = (props: HighlighterProps) => (
-    <ErrorBoundary>
-        <Highlighter {...props} />
-    </ErrorBoundary>
+    <pre className={cl("container")}>
+        <ErrorBoundary>
+            <Highlighter {...props} />
+        </ErrorBoundary>
+    </pre>
 );
 export const Highlighter = ({
     lang,
@@ -66,7 +68,7 @@ export const Highlighter = ({
     const shikiLang = lang ? resolveLang(lang) : null;
     const useHljs = shouldUseHljs({ lang, tryHljs });
 
-    const [preRef, isIntersecting] = useIntersection(true);
+    const [rootRef, isIntersecting] = useIntersection(true);
 
     const [tokens] = useAwaiter(async () => {
         if (!shikiLang || useHljs || !isIntersecting) return null;
@@ -93,8 +95,8 @@ export const Highlighter = ({
     if (isPreview) preClasses.push(cl("preview"));
 
     return (
-        <pre
-            ref={preRef}
+        <div
+            ref={rootRef}
             className={preClasses.join(" ")}
             style={{
                 backgroundColor: useHljs
@@ -123,7 +125,7 @@ export const Highlighter = ({
                     theme={themeBase}
                 />}
             </code>
-        </pre>
+        </div>
     );
 };
 
diff --git a/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts b/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
index 0d92f80..50b0fc9 100644
--- a/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
+++ b/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
@@ -17,17 +17,28 @@
 */
 
 import { useSettings } from "@api/settings";
+import { React } from "@webpack/common";
 
 import { shiki } from "../api/shiki";
 import { ShikiSettings } from "../types";
 
 export function useShikiSettings(settingKeys: (keyof ShikiSettings)[], overrides?: Record<string, any>) {
     const settings = useSettings(settingKeys.map(key => `plugins.ShikiCodeblocks.${key}`)).plugins.ShikiCodeblocks as ShikiSettings;
+    const [isLoading, setLoading] = React.useState(false);
 
     const withOverrides = { ...settings, ...overrides };
-
     const themeUrl = withOverrides.customTheme || withOverrides.theme;
-    if (themeUrl !== shiki.currentThemeUrl) shiki.setTheme(themeUrl);
+
+    if (overrides) {
+        const willChangeTheme = shiki.currentThemeUrl && themeUrl !== shiki.currentThemeUrl;
+        const noOverrides = Object.keys(overrides).length === 0;
+
+        if (isLoading && (!willChangeTheme || noOverrides)) setLoading(false);
+        if ((!isLoading && willChangeTheme)) {
+            setLoading(true);
+            shiki.setTheme(themeUrl);
+        }
+    }
 
     return {
         ...withOverrides,
diff --git a/src/plugins/shikiCodeblocks/style.css b/src/plugins/shikiCodeblocks/style.css
index 119ff80..b246db4 100644
--- a/src/plugins/shikiCodeblocks/style.css
+++ b/src/plugins/shikiCodeblocks/style.css
@@ -1,5 +1,8 @@
 .shiki-root {
     border-radius: 4px;
+
+    /* fallback background */
+    background-color: var(--background-secondary);
 }
 
 .shiki-root code {