redesign loading screen

src/libs/ndk/provider.tsx

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