Preload data

sonic16x · Dec 16, 2024 · 968e76c · 968e76c
1 parent 3c22c15
commit 968e76c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -1,6 +1,8 @@
 import { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
+import { isLoadingAction, runSearch } from 'actions'
+
 import { fetchDictionary } from 'services'
 
 import { useDarkTheme, useDictionaryLanguages } from 'hooks'
@@ -23,12 +25,17 @@ export const Main =
         const theme = isDarkTheme ? 'dark' : 'light'
 
         useEffect(() => {
-            document.getElementById('app').className='color-theme--' + theme;
+            document.getElementById('app').className = `color-theme--${theme}`
+        }, [theme])
 
+        useEffect(() => {
             (async () => {
-                await fetchDictionary(dispatch, dictionaryLanguages)
+                await fetchDictionary(dictionaryLanguages)
+
+                dispatch(isLoadingAction(false))
+                dispatch(runSearch())
             })()
-        }, [dispatch, dictionaryLanguages, theme])
+        }, [dictionaryLanguages])
 
         return (
             <>

diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -8,3 +8,4 @@ declare const FB: any
 declare const IS_COM: boolean
 declare const PR_NUMBER: string
 declare const Az: any
+declare const INTERSLAVIC_PRELOAD: Record<string, Promise<unknown>>
diff --git a/src/index.html.ejs b/src/index.html.ejs
@@ -29,6 +29,11 @@
         content="It is a dictionary of the Interslavic language with translations into most of the Slavic languages, as well as into English, German and others. The project is being developed by a community of fans of this zonal constructed language.">
 </head>
 <body>
+<script>
+  window.INTERSLAVIC_PRELOAD = {}
+  INTERSLAVIC_PRELOAD['data/basic.json'] = fetch('data/basic.json').then((res) => res.json())
+  INTERSLAVIC_PRELOAD['data/translateStatistic.json'] = fetch('data/translateStatistic.json').then((res) => res.json())
+</script>
 <noscript>
   <h1>Interslavic Wordbook</h1>
   <p>To use the site "Interslavic Dictionary", please enable javascript in your browser.</p>

diff --git a/src/services/fetchDictionary.ts b/src/services/fetchDictionary.ts
@@ -1,11 +1,21 @@
 import { ADD_LANGS } from 'consts'
 
-import { isLoadingAction, runSearch } from 'actions'
-
 import { Dictionary, SearchIndex, WordList } from 'services'
 
+async function fetchPreloaded(url: string): Promise<unknown> {
+    if (INTERSLAVIC_PRELOAD && INTERSLAVIC_PRELOAD[url]) {
+        return await INTERSLAVIC_PRELOAD[url].then((data) => {
+            INTERSLAVIC_PRELOAD[url] = null
+
+            return data
+        })
+    } else {
+        return await fetch(url).then((res) => res.json())
+    }
+}
+
 async function fetchStat() {
-    return fetch('data/translateStatistic.json').then((res) => res.json()).then((data) => data)
+    return await fetchPreloaded('data/translateStatistic.json') as Promise<Record<string, string>>
 }
 
 async function fetchLangs(langList: string[]) {
@@ -20,7 +30,7 @@ export interface IBasicData {
 }
 
 async function fetchBasic(): Promise<IBasicData> {
-    return await fetch('data/basic.json').then((res) => res.json())
+    return await fetchPreloaded('data/basic.json') as Promise<IBasicData>
 }
 
 export async function fetchLang(lang) {
@@ -33,7 +43,7 @@ export async function fetchLang(lang) {
     Dictionary.addLang(wordList, searchIndex)
 }
 
-export async function fetchDictionary(dispatch, langList: string[]) {
+export async function fetchDictionary(langList: string[]) {
     const startFidTime = performance.now()
 
     const stat = await fetchStat()
@@ -52,10 +62,6 @@ export async function fetchDictionary(dispatch, langList: string[]) {
 
     const initTime = Dictionary.init(basicData.wordList, basicData.searchIndex, stat)
 
-    // dispatch(loadingProgressAction(100));
-    dispatch(isLoadingAction(false))
-    dispatch(runSearch())
-
     const fidTime = Math.round(performance.now() - startFidTime)
 
     if (process.env.NODE_ENV !== 'production') {