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 { NDKEvent, NDKRelay, profileFromEvent } from '@nostr-dev-kit/ndk';
|
||||||
import type {
|
import type {
|
||||||
Hexpubkey,
|
Hexpubkey,
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
// source: https://github.com/nostr-dev-kit/ndk-react/
|
// source: https://github.com/nostr-dev-kit/ndk-react/
|
||||||
import NDK from '@nostr-dev-kit/ndk';
|
import NDK from '@nostr-dev-kit/ndk';
|
||||||
|
import Markdown from 'markdown-to-jsx';
|
||||||
import { NostrFetcher } from 'nostr-fetch';
|
import { NostrFetcher } from 'nostr-fetch';
|
||||||
import { PropsWithChildren, createContext, useContext } from 'react';
|
import { PropsWithChildren, createContext, useContext } from 'react';
|
||||||
|
|
||||||
@ -7,6 +8,8 @@ import { NDKInstance } from '@libs/ndk/instance';
|
|||||||
|
|
||||||
import { LoaderIcon } from '@shared/icons';
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
|
||||||
|
import { QUOTES } from '@stores/constants';
|
||||||
|
|
||||||
interface NDKContext {
|
interface NDKContext {
|
||||||
ndk: undefined | NDK;
|
ndk: undefined | NDK;
|
||||||
relayUrls: string[];
|
relayUrls: string[];
|
||||||
@ -22,19 +25,36 @@ const NDKContext = createContext<NDKContext>({
|
|||||||
const NDKProvider = ({ children }: PropsWithChildren<object>) => {
|
const NDKProvider = ({ children }: PropsWithChildren<object>) => {
|
||||||
const { ndk, relayUrls, fetcher } = NDKInstance();
|
const { ndk, relayUrls, fetcher } = NDKInstance();
|
||||||
|
|
||||||
if (!ndk) {
|
if (!ndk)
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
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">
|
<div className="flex max-w-2xl flex-col items-start gap-1">
|
||||||
<p className="text-xl font-medium">Connecting to relays...</p>
|
<h5 className="font-semibold uppercase">TIP:</h5>
|
||||||
<LoaderIcon className="h-7 w-7 animate-spin" />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NDKContext.Provider
|
<NDKContext.Provider
|
||||||
|
@ -4,12 +4,15 @@ import { platform } from '@tauri-apps/plugin-os';
|
|||||||
import { relaunch } from '@tauri-apps/plugin-process';
|
import { relaunch } from '@tauri-apps/plugin-process';
|
||||||
import Database from '@tauri-apps/plugin-sql';
|
import Database from '@tauri-apps/plugin-sql';
|
||||||
import { check } from '@tauri-apps/plugin-updater';
|
import { check } from '@tauri-apps/plugin-updater';
|
||||||
|
import Markdown from 'markdown-to-jsx';
|
||||||
import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
|
import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
import { LumeStorage } from '@libs/storage/instance';
|
import { LumeStorage } from '@libs/storage/instance';
|
||||||
|
|
||||||
import { LoaderIcon } from '@shared/icons';
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
|
||||||
|
import { QUOTES } from '@stores/constants';
|
||||||
|
|
||||||
interface StorageContext {
|
interface StorageContext {
|
||||||
db: LumeStorage;
|
db: LumeStorage;
|
||||||
}
|
}
|
||||||
@ -54,21 +57,38 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
|
|||||||
if (!db) initLumeStorage();
|
if (!db) initLumeStorage();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (!db) {
|
if (!db)
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
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">
|
<div className="flex max-w-2xl flex-col items-start gap-1">
|
||||||
<p className="text-xl font-medium">
|
<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...'}
|
{isNewVersion ? 'Found a new version, updating' : 'Checking for updates...'}
|
||||||
</p>
|
</p>
|
||||||
<LoaderIcon className="h-7 w-7 animate-spin" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
return <StorageContext.Provider value={{ db }}>{children}</StorageContext.Provider>;
|
return <StorageContext.Provider value={{ db }}>{children}</StorageContext.Provider>;
|
||||||
};
|
};
|
||||||
|
@ -32,7 +32,7 @@ export function FileNote({ event }: { event: NDKEvent }) {
|
|||||||
switch (type) {
|
switch (type) {
|
||||||
case 'image':
|
case 'image':
|
||||||
return (
|
return (
|
||||||
<div key={url} className="group">
|
<div key={url} className="group relative">
|
||||||
<img
|
<img
|
||||||
src={url}
|
src={url}
|
||||||
alt={url}
|
alt={url}
|
||||||
|
@ -28,7 +28,7 @@ export function FileKind({ tags }: { tags: NDKTag[] }) {
|
|||||||
|
|
||||||
if (type === 'image') {
|
if (type === 'image') {
|
||||||
return (
|
return (
|
||||||
<div key={url} className="group">
|
<div key={url} className="group relative">
|
||||||
<img
|
<img
|
||||||
src={url}
|
src={url}
|
||||||
alt={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