nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

redesign loading screen

Browse Source
This commit is contained in:
reya 2023-11-13 08:16:36 +07:00
parent 0a5076f06c
commit d5647d7452
6 changed files with 69 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/libs/ndk/cache.ts
View File

@ -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,

32
src/libs/ndk/provider.tsx
View File

@ -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

32
src/libs/storage/provider.tsx
View File

@ -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>;
};

2
src/shared/notes/file.tsx
View File

@ -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}

2
src/shared/notes/kinds/file.tsx
View File

@ -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}

14
src/stores/constants.ts
View File

@ -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/',
];