From 9b257912c85b2ef96913078346352bf739085a90 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Sun, 6 Oct 2024 10:32:20 +0300
Subject: [PATCH] toc-docinit-fix

---
 .../_shared/TableOfContents/TableOfContents.tsx     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/_shared/TableOfContents/TableOfContents.tsx b/src/components/_shared/TableOfContents/TableOfContents.tsx
index 3b132709..f5fb14b9 100644
--- a/src/components/_shared/TableOfContents/TableOfContents.tsx
+++ b/src/components/_shared/TableOfContents/TableOfContents.tsx
@@ -31,11 +31,12 @@ const scrollToHeader = (element: HTMLElement) => {
 
 export const TableOfContents = (props: Props) => {
   const { t } = useLocalize()
-
   const [headings, setHeadings] = createSignal<HTMLElement[]>([])
   const [areHeadingsLoaded, setAreHeadingsLoaded] = createSignal<boolean>(false)
   const [activeHeaderIndex, setActiveHeaderIndex] = createSignal<number>(-1)
   const [isVisible, setIsVisible] = createSignal<boolean>(props.variant === 'article')
+  const [isDocumentReady, setIsDocumentReady] = createSignal<boolean>(false)
+
   const toggleIsVisible = () => {
     setIsVisible((visible) => !visible)
   }
@@ -43,6 +44,7 @@ export const TableOfContents = (props: Props) => {
   setIsVisible(isDesktop())
 
   const updateHeadings = () => {
+    if (!isDocumentReady()) return
     const parent = document?.querySelector(props.parentSelector)
     if (parent) {
       setHeadings(
@@ -56,6 +58,7 @@ export const TableOfContents = (props: Props) => {
   const debouncedUpdateHeadings = debounce(500, updateHeadings)
 
   const updateActiveHeader = throttle(50, () => {
+    if (!isDocumentReady()) return
     const newActiveIndex = headings().findLastIndex((heading) => isInViewport(heading))
     setActiveHeaderIndex(newActiveIndex)
   })
@@ -63,11 +66,17 @@ export const TableOfContents = (props: Props) => {
   createEffect(
     on(
       () => props.body,
-      (_) => debouncedUpdateHeadings()
+      (_) => {
+        if (isDocumentReady()) {
+          debouncedUpdateHeadings()
+        }
+      }
     )
   )
 
   onMount(() => {
+    setIsDocumentReady(true)
+    debouncedUpdateHeadings()
     window.addEventListener('scroll', updateActiveHeader)
     onCleanup(() => window.removeEventListener('scroll', updateActiveHeader))
   })