feat: add splash screen

mfrederic · Nov 18, 2024 · 73e912e · 73e912e
1 parent 642b08a
commit 73e912e
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 36 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "realt-properties-map-frontend",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "license": "Apache-2.0",
   "scripts": {
     "start": "PORT=3010 react-scripts start",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -9,19 +9,23 @@ import { HotkeysProvider } from './providers/HotkeysProvider';
 import InitStoreProvider from './providers/InitStoreProvider';
 import { QueryProvider } from './providers/QueryProvider';
 import { initAnalytics } from './services/analytics';
+import SplashScreen from './components/Common/SplashScreen';
+import { useState } from 'react';
 
 initAnalytics();
 
 function App() {
+  const [display, setDisplay] = useState(true);
   return (
     <RealtProvider value={{}}>
       <Provider store={store}>
         <InitStoreProvider>
           <QueryProvider>
             <MantineProviders>
               <HotkeysProvider>
+                <SplashScreen onVisibleChange={setDisplay} />
                 <MapWrapper />
-                <AppActions />
+                <AppActions display={!display} />
               </HotkeysProvider>
             </MantineProviders>
           </QueryProvider>

diff --git a/frontend/src/components/Common/MadeBy.tsx b/frontend/src/components/Common/MadeBy.tsx
@@ -0,0 +1,28 @@
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+export default function MadeBy({
+  extra = false,
+}: {
+  extra?: boolean;
+}) {
+  const { t } = useTranslation('common', { keyPrefix: 'extra' });
+
+  return (
+    <Text className="opacity-40" size="sm">
+      {t('madeBy')} <a
+        href="https://github.com/mfrederic"
+        target="_blank"
+        rel="noreferrer">@mfrederic</a>.&nbsp;
+      {extra &&
+        <>
+          {t('baseOn')}:&nbsp;
+          <a
+            href="https://github.com/homelabkas"
+            target="_blank"
+            rel="noreferrer">@homelabkas</a>.
+        </>
+      }
+    </Text>
+  )
+}
diff --git a/frontend/src/components/Common/SplashScreen.tsx b/frontend/src/components/Common/SplashScreen.tsx
@@ -0,0 +1,47 @@
+import { Overlay, Title } from "@mantine/core";
+import { RealtLogo } from "./RealtLogo";
+import { useState, useEffect } from "react";
+import MadeBy from "./MadeBy";
+
+export default function SplashScreen({
+  onVisibleChange,
+}: {
+  onVisibleChange: (visible: boolean) => void;
+}) {
+  const [visible, setVisible] = useState(true);
+  const [opacity, setOpacity] = useState(1);
+
+  useEffect(() => {
+    const fadeTimer = setTimeout(() => {
+      setOpacity(0);
+    }, 1000);
+
+    const hideTimer = setTimeout(() => {
+      setVisible(false);
+      onVisibleChange(false);
+    }, 1500);
+
+    return () => {
+      clearTimeout(fadeTimer);
+      clearTimeout(hideTimer);
+    };
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <Overlay
+      backgroundOpacity={.5}
+      blur={15}
+      className="flex flex-col items-center justify-center h-screen"
+      style={{
+        opacity,
+        transition: 'opacity 500ms ease-out'
+      }}
+    >
+      <RealtLogo className="w-64 mb-12" />
+      <Title order={1} size="2rem">RealT Properties Map</Title>
+      <MadeBy />
+    </Overlay>
+  );
+}
diff --git a/frontend/src/components/Settings/AppActions.tsx b/frontend/src/components/Settings/AppActions.tsx
@@ -13,7 +13,11 @@ import { useCopyUrl } from '../../hooks/useCopyUrl';
 import { useTranslation } from 'react-i18next';
 import { SearchBar } from './SearchBar';
 
-export function AppActions() {
+export function AppActions({
+  display,
+}: {
+  display: boolean;
+}) {
   const { t } = useTranslation('common');
   const { copied, onCopyUrl } = useCopyUrl();
 
@@ -39,29 +43,34 @@ export function AppActions() {
 
   return (
     <>
-      <WalletsPanel opened={walletsOpened} close={closeWallets} />
-      <MapOptionsPanel opened={mapOptionsOpened} close={closeMapOptions} />
       {
-        !mapOptionsOpened && !walletsOpened &&
-        <AffixBtn>
-          <Flex align="end" className="ml-2 sm:ml-0">
-            <SearchBar />
-            <AppActionsButton opened={false} open={onCopyUrl} label={t('actions.copyUrl')} color={copied ? 'teal' : ''}>
-              {
-                !copied
-                  ? <LinkIcon fontSize="large" />
-                  : <CheckIcon fontSize="large" />
-              }
-            </AppActionsButton>
-            <StartTooltip />
-            <AppActionsButton opened={false} open={onOpenWallets} label={t('actions.openWalletsPanel')}>
-              <WalletIcon fontSize="large" />
-            </AppActionsButton>
-            <AppActionsButton opened={false} open={onOpenMapOptions} label={t('actions.openSettingsPanel')}>
-              <SettingsIcon fontSize="large" />
-            </AppActionsButton>
-          </Flex>
-        </AffixBtn>
+        display &&
+        <>
+          <WalletsPanel opened={walletsOpened} close={closeWallets} />
+          <MapOptionsPanel opened={mapOptionsOpened} close={closeMapOptions} />
+          {
+          !mapOptionsOpened && !walletsOpened &&
+          <AffixBtn>
+            <Flex align="end" className="ml-2 sm:ml-0">
+              <SearchBar />
+              <AppActionsButton opened={false} open={onCopyUrl} label={t('actions.copyUrl')} color={copied ? 'teal' : ''}>
+                {
+                  !copied
+                    ? <LinkIcon fontSize="large" />
+                    : <CheckIcon fontSize="large" />
+                }
+              </AppActionsButton>
+              <StartTooltip />
+              <AppActionsButton opened={false} open={onOpenWallets} label={t('actions.openWalletsPanel')}>
+                <WalletIcon fontSize="large" />
+              </AppActionsButton>
+              <AppActionsButton opened={false} open={onOpenMapOptions} label={t('actions.openSettingsPanel')}>
+                <SettingsIcon fontSize="large" />
+              </AppActionsButton>
+            </Flex>
+            </AffixBtn>
+          }
+        </>
       }
     </>
   )

diff --git a/frontend/src/components/Settings/SettingsPanelContent.tsx b/frontend/src/components/Settings/SettingsPanelContent.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import InfoIcon from '@mui/icons-material/Info';
 import Version from "../Common/Version";
 import { Box, Button, Flex, Text } from "@mantine/core";
+import MadeBy from "../Common/MadeBy";
 
 export function SettingsPanelContent({
   className,
@@ -40,17 +41,7 @@ export function SettingsPanelContent({
           </Box>
           <Flex>
             <Version />
-            <Text className="opacity-40" size="sm">
-              {t('madeBy')} <a
-                href="https://github.com/mfrederic"
-                target="_blank"
-                rel="noreferrer">@mfrederic</a>.&nbsp;
-              {t('baseOn')}:
-              <a
-                href="https://github.com/homelabkas"
-                target="_blank"
-                rel="noreferrer">@homelabkas</a>.
-            </Text>
+            <MadeBy extra />
           </Flex>
         </Flex>
       </footer>