From c2991ff88b5430e02bf5f1dd7e502a3793fb1430 Mon Sep 17 00:00:00 2001 From: Anastasiia Solop <35258279+anastasiya1155@users.noreply.github.com> Date: Wed, 30 Aug 2023 16:14:18 +0300 Subject: [PATCH] Splash screen (#904) * add splash screen to tauri app until config returns response * add splash screen to tauri app until config returns response * remove circular progress * theme adjustments, fading animation * add localization * refetch config after a second after server started --- apps/desktop/src/App.tsx | 27 +++++++++++++++++++--- apps/desktop/src/SplashScreen.tsx | 37 +++++++++++++++++++++++++++++++ client/src/icons/LogoFull.tsx | 8 +------ client/src/locales/en.json | 3 ++- client/src/locales/es.json | 5 +++-- client/src/locales/ja.json | 5 +++-- client/src/locales/zh-CN.json | 5 +++-- client/tailwind.config.cjs | 25 +++++++++++++++++++++ 8 files changed, 98 insertions(+), 17 deletions(-) create mode 100644 apps/desktop/src/SplashScreen.tsx diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 947a548f96..a8716ed0f5 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -5,6 +5,7 @@ import React, { useRef, useState, } from 'react'; +import { AnimatePresence } from 'framer-motion'; import { invoke } from '@tauri-apps/api'; import { open } from '@tauri-apps/api/shell'; import { homeDir } from '@tauri-apps/api/path'; @@ -17,7 +18,7 @@ import { BrowserRouter } from 'react-router-dom'; import ClientApp from '../../../client/src/App'; import '../../../client/src/index.css'; import useKeyboardNavigation from '../../../client/src/hooks/useKeyboardNavigation'; -import { getConfig } from '../../../client/src/services/api'; +import { getConfig, initApi } from '../../../client/src/services/api'; import { LocaleContext } from '../../../client/src/context/localeContext'; import i18n from '../../../client/src/i18n'; import { @@ -27,6 +28,7 @@ import { } from '../../../client/src/services/storage'; import { LocaleType } from '../../../client/src/types/general'; import TextSearch from './TextSearch'; +import SplashScreen from './SplashScreen'; // let askedToUpdate = false; // let intervalId: number; @@ -102,6 +104,7 @@ function App() { const [locale, setLocale] = useState( (getPlainFromStorage(LANGUAGE_KEY) as LocaleType | null) || 'en', ); + const [shouldShowSplashScreen, setShouldShowSplashScreen] = useState(true); useEffect(() => { i18n.changeLanguage(locale); @@ -156,8 +159,22 @@ function App() { useKeyboardNavigation(handleKeyEvent); useEffect(() => { - setTimeout(() => getConfig().then(setEnvConfig), 1000); // server returns wrong tracking_id within first second - }, []); + let intervalId: number; + if (!Object.keys(envConfig).length) { + initApi('http://127.0.0.1:7878/api'); + getConfig().then(setEnvConfig); + intervalId = window.setInterval(() => { + getConfig().then(setEnvConfig); + }, 500); + } else { + // just in case config changed + setTimeout(() => getConfig().then(setEnvConfig), 1000); + setShouldShowSplashScreen(false); + } + return () => { + clearInterval(intervalId); + }; + }, [envConfig]); const deviceContextValue = useMemo( () => ({ @@ -186,8 +203,12 @@ function App() { }), [homeDirectory, indexFolder, os, release, envConfig], ); + return ( + + {shouldShowSplashScreen && } +
diff --git a/apps/desktop/src/SplashScreen.tsx b/apps/desktop/src/SplashScreen.tsx new file mode 100644 index 0000000000..3ae16bc1da --- /dev/null +++ b/apps/desktop/src/SplashScreen.tsx @@ -0,0 +1,37 @@ +import React, { memo } from 'react'; +import { motion } from 'framer-motion'; +import { Trans } from 'react-i18next'; +import { LogoFull } from '../../../client/src/icons'; + +type Props = {}; + +const SplashScreen = ({}: Props) => { + return ( + +
+
+
+
+ +
+
+ Loading... +
+
+ + ); +}; + +export default memo(SplashScreen); diff --git a/client/src/icons/LogoFull.tsx b/client/src/icons/LogoFull.tsx index 8ba484f3ad..496a52db24 100644 --- a/client/src/icons/LogoFull.tsx +++ b/client/src/icons/LogoFull.tsx @@ -1,11 +1,5 @@ const LogoFull = () => ( - +