From 0cfc3a48d815fd320ff777333a4a77bbe6c8034e Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 11 Aug 2023 11:55:31 +0700
Subject: [PATCH] update splash screen
---
src-tauri/tauri.conf.json | 2 +-
src/app.tsx | 195 +++++++++++++++++++++++++--------
src/app/splash.tsx | 66 ++++++-----
src/libs/ndk/instance.ts | 43 +++++++-
src/libs/ndk/provider.tsx | 23 ++--
src/utils/hooks/useAccount.tsx | 2 +
src/utils/hooks/useNostr.tsx | 4 +
7 files changed, 244 insertions(+), 91 deletions(-)
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 87cedc1a..e674efea 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -111,7 +111,7 @@
{
"width": 400,
"height": 500,
- "decorations": false,
+ "decorations": true,
"hiddenTitle": true,
"center": true,
"resizable": false,
diff --git a/src/app.tsx b/src/app.tsx
index a3ba0c3c..eaed5b40 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,31 +1,9 @@
import { RouterProvider, createBrowserRouter, redirect } from 'react-router-dom';
import { AuthCreateScreen } from '@app/auth/create';
-import { CreateStep1Screen } from '@app/auth/create/step-1';
-import { CreateStep2Screen } from '@app/auth/create/step-2';
-import { CreateStep3Screen } from '@app/auth/create/step-3';
import { AuthImportScreen } from '@app/auth/import';
-import { ImportStep1Screen } from '@app/auth/import/step-1';
-import { ImportStep2Screen } from '@app/auth/import/step-2';
-import { ImportStep3Screen } from '@app/auth/import/step-3';
-import { MigrateScreen } from '@app/auth/migrate';
import { OnboardingScreen } from '@app/auth/onboarding';
-import { OnboardStep1Screen } from '@app/auth/onboarding/step-1';
-import { OnboardStep2Screen } from '@app/auth/onboarding/step-2';
-import { OnboardStep3Screen } from '@app/auth/onboarding/step-3';
-import { ResetScreen } from '@app/auth/reset';
-import { UnlockScreen } from '@app/auth/unlock';
-import { WelcomeScreen } from '@app/auth/welcome';
-import { ChatScreen } from '@app/chats';
import { ErrorScreen } from '@app/error';
-import { EventScreen } from '@app/events';
-import { AccountSettingsScreen } from '@app/settings/account';
-import { GeneralSettingsScreen } from '@app/settings/general';
-import { ShortcutsSettingsScreen } from '@app/settings/shortcuts';
-import { SpaceScreen } from '@app/space';
-import { SplashScreen } from '@app/splash';
-import { TrendingScreen } from '@app/trending';
-import { UserScreen } from '@app/users';
import { getActiveAccount } from '@libs/storage';
@@ -69,62 +47,191 @@ const router = createBrowserRouter([
errorElement: ,
loader: appLoader,
children: [
- { path: '', element: },
- { path: 'trending', element: },
- { path: 'events/:id', element: },
- { path: 'users/:pubkey', element: },
- { path: 'chats/:pubkey', element: },
+ {
+ path: '',
+ async lazy() {
+ const { SpaceScreen } = await import('@app/space');
+ return { Component: SpaceScreen };
+ },
+ },
+ {
+ path: 'trending',
+ async lazy() {
+ const { TrendingScreen } = await import('@app/trending');
+ return { Component: TrendingScreen };
+ },
+ },
+ {
+ path: 'events/:id',
+ async lazy() {
+ const { EventScreen } = await import('@app/events');
+ return { Component: EventScreen };
+ },
+ },
+ {
+ path: 'users/:pubkey',
+ async lazy() {
+ const { UserScreen } = await import('@app/users');
+ return { Component: UserScreen };
+ },
+ },
+ {
+ path: 'chats/:pubkey',
+ async lazy() {
+ const { ChatScreen } = await import('@app/chats');
+ return { Component: ChatScreen };
+ },
+ },
],
},
{
path: '/splashscreen',
- element: ,
errorElement: ,
+ async lazy() {
+ const { SplashScreen } = await import('@app/splash');
+ return { Component: SplashScreen };
+ },
},
{
path: '/auth',
element: ,
children: [
- { path: 'welcome', element: },
+ {
+ path: 'welcome',
+ async lazy() {
+ const { WelcomeScreen } = await import('@app/auth/welcome');
+ return { Component: WelcomeScreen };
+ },
+ },
{
path: 'import',
element: ,
children: [
- { path: '', element: },
- { path: 'step-2', element: },
- { path: 'step-3', element: },
+ {
+ path: '',
+ async lazy() {
+ const { ImportStep1Screen } = await import('@app/auth/import/step-1');
+ return { Component: ImportStep1Screen };
+ },
+ },
+ {
+ path: 'step-2',
+ async lazy() {
+ const { ImportStep2Screen } = await import('@app/auth/import/step-2');
+ return { Component: ImportStep2Screen };
+ },
+ },
+ {
+ path: 'step-3',
+ async lazy() {
+ const { ImportStep3Screen } = await import('@app/auth/import/step-3');
+ return { Component: ImportStep3Screen };
+ },
+ },
],
},
{
path: 'create',
element: ,
children: [
- { path: '', element: },
- { path: 'step-2', element: },
- { path: 'step-3', element: },
+ {
+ path: '',
+ async lazy() {
+ const { CreateStep1Screen } = await import('@app/auth/create/step-1');
+ return { Component: CreateStep1Screen };
+ },
+ },
+ {
+ path: 'step-2',
+ async lazy() {
+ const { CreateStep2Screen } = await import('@app/auth/create/step-2');
+ return { Component: CreateStep2Screen };
+ },
+ },
+ {
+ path: 'step-3',
+ async lazy() {
+ const { CreateStep3Screen } = await import('@app/auth/create/step-3');
+ return { Component: CreateStep3Screen };
+ },
+ },
],
},
{
path: 'onboarding',
element: ,
children: [
- { path: '', element: },
- { path: 'step-2', element: },
- { path: 'step-3', element: },
+ {
+ path: '',
+ async lazy() {
+ const { OnboardStep1Screen } = await import('@app/auth/onboarding/step-1');
+ return { Component: OnboardStep1Screen };
+ },
+ },
+ {
+ path: 'step-2',
+ async lazy() {
+ const { OnboardStep2Screen } = await import('@app/auth/onboarding/step-2');
+ return { Component: OnboardStep2Screen };
+ },
+ },
+ {
+ path: 'step-3',
+ async lazy() {
+ const { OnboardStep3Screen } = await import('@app/auth/onboarding/step-3');
+ return { Component: OnboardStep3Screen };
+ },
+ },
],
},
- { path: 'unlock', element: },
- { path: 'migrate', element: },
- { path: 'reset', element: },
+ {
+ path: 'unlock',
+ async lazy() {
+ const { UnlockScreen } = await import('@app/auth/unlock');
+ return { Component: UnlockScreen };
+ },
+ },
+ {
+ path: 'migrate',
+ async lazy() {
+ const { MigrateScreen } = await import('@app/auth/migrate');
+ return { Component: MigrateScreen };
+ },
+ },
+ {
+ path: 'reset',
+ async lazy() {
+ const { ResetScreen } = await import('@app/auth/reset');
+ return { Component: ResetScreen };
+ },
+ },
],
},
{
path: '/settings',
element: ,
children: [
- { path: 'general', element: },
- { path: 'shortcuts', element: },
- { path: 'account', element: },
+ {
+ path: 'general',
+ async lazy() {
+ const { GeneralSettingsScreen } = await import('@app/settings/general');
+ return { Component: GeneralSettingsScreen };
+ },
+ },
+ {
+ path: 'shortcuts',
+ async lazy() {
+ const { ShortcutsSettingsScreen } = await import('@app/settings/shortcuts');
+ return { Component: ShortcutsSettingsScreen };
+ },
+ },
+ {
+ path: 'account',
+ async lazy() {
+ const { AccountSettingsScreen } = await import('@app/settings/account');
+ return { Component: AccountSettingsScreen };
+ },
+ },
],
},
]);
diff --git a/src/app/splash.tsx b/src/app/splash.tsx
index 8a9ebf08..bd70ebce 100644
--- a/src/app/splash.tsx
+++ b/src/app/splash.tsx
@@ -1,50 +1,54 @@
import { invoke } from '@tauri-apps/api/tauri';
import { useEffect, useState } from 'react';
-import { getActiveAccount, updateLastLogin } from '@libs/storage';
+import { useNDK } from '@libs/ndk/provider';
+import { updateLastLogin } from '@libs/storage';
import { LoaderIcon } from '@shared/icons';
+import { useAccount } from '@utils/hooks/useAccount';
import { useNostr } from '@utils/hooks/useNostr';
-const account = await getActiveAccount();
-
export function SplashScreen() {
- const [loading, setLoading] = useState(true);
+ const { ndk, relayUrls } = useNDK();
+ const { status, account } = useAccount();
const { fetchChats, fetchNotes } = useNostr();
- if (!account) {
- setTimeout(async () => await invoke('close_splashscreen'), 500);
- }
+ const [loading, setLoading] = useState(true);
const skip = async () => {
await invoke('close_splashscreen');
};
+ const prefetch = async () => {
+ const onboarding = localStorage.getItem('onboarding');
+ const step = JSON.parse(onboarding).state.step || null;
+ if (step) await invoke('close_splashscreen');
+
+ const notes = await fetchNotes();
+ const chats = await fetchChats();
+
+ if (notes.status === 'ok' && chats.status === 'ok') {
+ const now = Math.floor(Date.now() / 1000);
+ await updateLastLogin(now);
+ invoke('close_splashscreen');
+ } else {
+ setLoading(false);
+ console.log('fetch notes failed, error: ', notes.message);
+ console.log('fetch chats failed, error: ', chats.message);
+ }
+ };
+
useEffect(() => {
- async function prefetch() {
- const onboarding = localStorage.getItem('onboarding');
- const step = JSON.parse(onboarding).state.step || null;
- if (step) await invoke('close_splashscreen');
-
- const notes = await fetchNotes();
- const chats = await fetchChats();
-
- if (notes.status === 'ok' && chats.status === 'ok') {
- const now = Math.floor(Date.now() / 1000);
- await updateLastLogin(now);
- invoke('close_splashscreen');
- } else {
- setLoading(false);
- console.log('fetch notes failed, error: ', notes.message);
- console.log('fetch chats failed, error: ', chats.message);
- }
+ if (status === 'success' && !account) {
+ invoke('close_splashscreen');
}
- if (account && loading) {
+ if (ndk && account) {
+ console.log('prefetching...');
prefetch();
}
- }, []);
+ }, [ndk, account]);
return (
@@ -55,9 +59,11 @@ export function SplashScreen() {
{loading ? (
- Prefetching data
+ {!ndk
+ ? 'Connecting to relay...'
+ : `Connected to ${relayUrls.length} relays`}
-
+
This may take a few seconds, please don't close app.
@@ -66,8 +72,8 @@ export function SplashScreen() {
Something wrong!
-
- Prefetching process failed, click skip to continue.
+
+ Connect process failed, click skip to continue.