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
BloopAI · Aug 30, 2023 · c2991ff · c2991ff
1 parent fda9266
commit c2991ff
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 17 deletions.
diff --git 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<LocaleType>(
     (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 (
     <LocaleContext.Provider value={localeContextValue}>
+      <AnimatePresence initial={false}>
+        {shouldShowSplashScreen && <SplashScreen />}
+      </AnimatePresence>
       <TextSearch contentRoot={contentContainer.current} />
       <div ref={contentContainer}>
         <BrowserRouter>

diff --git a/apps/desktop/src/SplashScreen.tsx 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 (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      key="splash"
+      className="w-screen h-screen flex items-center justify-center bg-bg-sub fixed top-0 left-0 z-[1000]"
+    >
+      <div className="w-99 rounded-xl border border-bg-border bg-bg-base px-12 py-20 relative animate-pulse-shadow-slow z-0">
+        <div
+          className={`absolute top-0 left-1/2 z-10 transform -translate-x-1/2 h-px w-1/2 
+        bg-[linear-gradient(90deg,rgba(var(--label-base),0.00)_0%,rgb(var(--label-base))_50%,rgba(var(--label-base),0.00)_100%)]`}
+        />
+        <div
+          className={`absolute top-0 left-1/2 z-20 transform -translate-x-1/2 h-px w-1/2 animate-opacity-slow
+        bg-[linear-gradient(90deg,rgba(var(--label-link),0.00)_0%,rgb(var(--label-link))_50%,rgba(var(--label-link),0.00)_100%)]`}
+        />
+        <div className="animate-pulse-slow text-label-title">
+          <LogoFull />
+        </div>
+        <div className="flex gap-3 items-center rounded-lg shadow-high border border-bg-border bg-bg-shade px-4 py-2 absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 body-s z-10 text-label-base">
+          <Trans>Loading...</Trans>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default memo(SplashScreen);
diff --git a/client/src/icons/LogoFull.tsx b/client/src/icons/LogoFull.tsx
@@ -1,11 +1,5 @@
 const LogoFull = () => (
-  <svg
-    width="83"
-    height="28"
-    viewBox="0 0 83 28"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg viewBox="0 0 83 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clipPath="url(#clip0_624_66850)">
       <path
         d="M71.8267 8.91071C67.9767 5.9327 64.1138 7.54719 62.5718 9.45922C62.1552 9.04266 61.8603 8.64422 61.467 8.25353H58.8538V28H64.207V23.4851L64.075 21.9741C64.947 23.0711 69.0427 24.5355 72.5278 21.1151C73.3621 20.3086 74.0126 19.3316 74.4349 18.2507C74.8572 17.1699 75.0414 16.0107 74.9748 14.8522C74.9083 13.6937 74.5926 12.5632 74.0493 11.5378C73.506 10.5125 72.7478 9.61637 71.8267 8.91071ZM66.9107 18.2432C66.3329 18.2391 65.7692 18.064 65.2907 17.74C64.8122 17.416 64.4403 16.9575 64.222 16.4225C64.0037 15.8874 63.9487 15.2997 64.064 14.7335C64.1792 14.1672 64.4595 13.6477 64.8696 13.2405C65.2796 12.8334 65.8011 12.5567 66.3681 12.4455C66.9352 12.3342 67.5225 12.3934 68.056 12.6154C68.5895 12.8375 69.0453 13.2126 69.3659 13.6933C69.6866 14.1741 69.8577 14.739 69.8577 15.3169C69.8577 15.7021 69.7817 16.0834 69.634 16.4391C69.4863 16.7949 69.2698 17.1179 68.997 17.3898C68.7241 17.6616 68.4003 17.877 68.0441 18.0234C67.6879 18.1699 67.3062 18.2445 66.9211 18.2432H66.9107Z"

diff --git a/client/src/locales/en.json b/client/src/locales/en.json
@@ -264,5 +264,6 @@
 	"Click to copy": "Click to copy",
 	"Copy link": "Copy link",
 	"Search using RegExp": "Search using RegExp",
-	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub"
+	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub",
+	"Loading...": "Loading..."
 }
diff --git a/client/src/locales/es.json b/client/src/locales/es.json
@@ -264,5 +264,6 @@
 	"Editing a previously submitted question will discard all answers and questions following it.": "La edición de una pregunta enviada anteriormente descartará todas las respuestas y preguntas posteriores.",
 	"Copy link": "Copiar link",
 	"Search using RegExp": "Buscar con RegExp",
-	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "Hemos actualizado nuestro servicio de autores para que el Bloop sea más seguro, por favor reanice a su cliente con GitHub"
-}
+	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "Hemos actualizado nuestro servicio de autores para que el Bloop sea más seguro, por favor reanice a su cliente con GitHub",
+	"Loading...": "Cargando..."
+}
diff --git a/client/src/locales/ja.json b/client/src/locales/ja.json
@@ -264,5 +264,6 @@
 	"Click to copy": "クリックしてコピーします",
 	"Copy link": "リンクをコピーする",
 	"Search using RegExp": "RegExpを使用して検索します",
-	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "Bloopをより安全にするためにAUTHサービスを更新しました。GitHubでクライアントを再承認してください"
-}
+	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "Bloopをより安全にするためにAUTHサービスを更新しました。GitHubでクライアントを再承認してください",
+	"Loading...": "読み込み中..."
+}
diff --git a/client/src/locales/zh-CN.json b/client/src/locales/zh-CN.json
@@ -264,5 +264,6 @@
 	"Click to copy": "单击复制",
 	"Copy link": "复制链接",
 	"Search using RegExp": "使用RegExp搜索",
-	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "我们已经更新了我们的身份服务以使Bloop更加安全，请使用GitHub重新授权您的客户"
-}
+	"We’ve updated our auth service to make bloop more secure, please reauthorise your client with GitHub": "我们已经更新了我们的身份服务以使Bloop更加安全，请使用GitHub重新授权您的客户",
+	"Loading...": "正在加载..."
+}
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
@@ -131,6 +131,9 @@ module.exports = {
         100: 100,
       },
       animation: {
+        'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'opacity-slow': 'opacity 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'pulse-shadow-slow': 'shadow 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
         'spin-slow': 'spin 1.5s linear infinite',
         'spin-extra-slow': 'spin 2s linear infinite',
         'move-x': 'move-x 2.5s linear infinite',
@@ -142,6 +145,28 @@ module.exports = {
         'loader-state-three': 'loader-state-three 0.55s cubic-bezier(.5,.0,1,.5)',
       },
       keyframes: {
+        shadow: {
+          '0%': {
+            boxShadow: 'var(--shadow-float)',
+          },
+          '50%': {
+            boxShadow: 'var(--shadow-low)',
+          },
+          '100%': {
+            boxShadow: 'var(--shadow-float)',
+          },
+        },
+        opacity: {
+          '0%': {
+            opacity: 0,
+          },
+          '50%': {
+            opacity: 1,
+          },
+          '100%': {
+            opacity: 0,
+          },
+        },
         'move-x': {
           '0%': {
             transform: 'translateX(-75%)',