mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
redesign loading screen
This commit is contained in:
parent
0a5076f06c
commit
d5647d7452
@ -1,3 +1,4 @@
|
||||
// inspired by: https://github.com/nostr-dev-kit/ndk/tree/master/ndk-cache-dexie
|
||||
import { NDKEvent, NDKRelay, profileFromEvent } from '@nostr-dev-kit/ndk';
|
||||
import type {
|
||||
Hexpubkey,
|
||||
|
@ -1,5 +1,6 @@
|
||||
// source: https://github.com/nostr-dev-kit/ndk-react/
|
||||
import NDK from '@nostr-dev-kit/ndk';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import { NostrFetcher } from 'nostr-fetch';
|
||||
import { PropsWithChildren, createContext, useContext } from 'react';
|
||||
|
||||
@ -7,6 +8,8 @@ import { NDKInstance } from '@libs/ndk/instance';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { QUOTES } from '@stores/constants';
|
||||
|
||||
interface NDKContext {
|
||||
ndk: undefined | NDK;
|
||||
relayUrls: string[];
|
||||
@ -22,19 +25,36 @@ const NDKContext = createContext<NDKContext>({
|
||||
const NDKProvider = ({ children }: PropsWithChildren<object>) => {
|
||||
const { ndk, relayUrls, fetcher } = NDKInstance();
|
||||
|
||||
if (!ndk) {
|
||||
if (!ndk)
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
|
||||
className="relative flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-center">
|
||||
<p className="text-xl font-medium">Connecting to relays...</p>
|
||||
<LoaderIcon className="h-7 w-7 animate-spin" />
|
||||
<div className="flex max-w-2xl flex-col items-start gap-1">
|
||||
<h5 className="font-semibold uppercase">TIP:</h5>
|
||||
<Markdown
|
||||
options={{
|
||||
overrides: {
|
||||
a: {
|
||||
props: {
|
||||
className: 'text-blue-500 hover:text-blue-600',
|
||||
target: '_blank',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="text-4xl font-semibold leading-snug text-neutral-300 dark:text-neutral-700"
|
||||
>
|
||||
{QUOTES[Math.floor(Math.random() * QUOTES.length)]}
|
||||
</Markdown>
|
||||
</div>
|
||||
<div className="absolute bottom-5 right-5 inline-flex items-center gap-2.5">
|
||||
<LoaderIcon className="h-6 w-6 animate-spin text-blue-500" />
|
||||
<p className="font-semibold">Connecting to relays...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NDKContext.Provider
|
||||
|
@ -4,12 +4,15 @@ import { platform } from '@tauri-apps/plugin-os';
|
||||
import { relaunch } from '@tauri-apps/plugin-process';
|
||||
import Database from '@tauri-apps/plugin-sql';
|
||||
import { check } from '@tauri-apps/plugin-updater';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
import { LumeStorage } from '@libs/storage/instance';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { QUOTES } from '@stores/constants';
|
||||
|
||||
interface StorageContext {
|
||||
db: LumeStorage;
|
||||
}
|
||||
@ -54,21 +57,38 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
|
||||
if (!db) initLumeStorage();
|
||||
}, []);
|
||||
|
||||
if (!db) {
|
||||
if (!db)
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
|
||||
className="relative flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-center">
|
||||
<p className="text-xl font-medium">
|
||||
<div className="flex max-w-2xl flex-col items-start gap-1">
|
||||
<h5 className="font-semibold uppercase">TIP:</h5>
|
||||
<Markdown
|
||||
options={{
|
||||
overrides: {
|
||||
a: {
|
||||
props: {
|
||||
className: 'text-blue-500 hover:text-blue-600',
|
||||
target: '_blank',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="text-4xl font-semibold leading-snug text-neutral-300 dark:text-neutral-700"
|
||||
>
|
||||
{QUOTES[Math.floor(Math.random() * QUOTES.length)]}
|
||||
</Markdown>
|
||||
</div>
|
||||
<div className="absolute bottom-5 right-5 inline-flex items-center gap-2.5">
|
||||
<LoaderIcon className="h-6 w-6 animate-spin text-blue-500" />
|
||||
<p className="font-semibold">
|
||||
{isNewVersion ? 'Found a new version, updating' : 'Checking for updates...'}
|
||||
</p>
|
||||
<LoaderIcon className="h-7 w-7 animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <StorageContext.Provider value={{ db }}>{children}</StorageContext.Provider>;
|
||||
};
|
||||
|
@ -32,7 +32,7 @@ export function FileNote({ event }: { event: NDKEvent }) {
|
||||
switch (type) {
|
||||
case 'image':
|
||||
return (
|
||||
<div key={url} className="group">
|
||||
<div key={url} className="group relative">
|
||||
<img
|
||||
src={url}
|
||||
alt={url}
|
||||
|
@ -28,7 +28,7 @@ export function FileKind({ tags }: { tags: NDKTag[] }) {
|
||||
|
||||
if (type === 'image') {
|
||||
return (
|
||||
<div key={url} className="group">
|
||||
<div key={url} className="group relative">
|
||||
<img
|
||||
src={url}
|
||||
alt={url}
|
||||
|
@ -301,3 +301,17 @@ export const TOPICS = [
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const QUOTES = [
|
||||
'You can learn more about nostr here: https://usenostr.org',
|
||||
'Nostr have a lot of awesome clients, you can spend a bit of time to try https://snort.social',
|
||||
'Nostr have a lot of awesome clients, you can spend a bit of time to try https://iris.to',
|
||||
'Nostr have a lot of awesome clients, you can spend a bit of time to try https://primal.net',
|
||||
'Nostr have a lot of awesome clients, you can spend a bit of time to try https://nostrudel.ninja',
|
||||
"If you're using iOS, you can use Nostr with https://damus.io",
|
||||
"If you're using Android, you can use Nostr with Amethyst",
|
||||
'If you want to curating and sharing your interests on Nostr, you can use https://pinstr.app',
|
||||
'If you want to post anonymously on Nostr, you can use https://www.get-tao.app',
|
||||
'If you want to read in-depth content and high quality insight, you can use https://habla.news',
|
||||
'You can send secure message on Nostr with https://0xchat.com/',
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user