update dependencies and polish

src/shared/widgets/emptyList.tsx

@@ -1,65 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { useNostr } from '@utils/hooks/useNostr';
-import { useStronghold } from '@stores/stronghold';
-
-export function EmptyList() {
-  const { db } = useStorage();
-  const { getAllEventsSinceLastLogin } = useNostr();
-
-  const setIsFetched = useStronghold((state) => state.setIsFetched);
-  const queryClient = useQueryClient();
-  
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    async function getEvents() {
-      const events = await getAllEventsSinceLastLogin();
-      const promises = await Promise.all(
-        events.data.map(async (event) => await db.createEvent(event))
-      );
-
-      if (promises) {
-        setProgress(100);
-        setIsFetched();
-        // invalidate queries
-        queryClient.invalidateQueries(['local-network-widget']);
-      }
-    }
-
-    // only start download if progress === 0
-    if (progress === 0) getEvents();
-
-    // auto increase progress after 2 secs
-    setInterval(() => setProgress((prev) => (prev += 8)), 2000);
-  }, []);
-
-  return (
-    <div className="px-3">
-      <div className="h-max w-full rounded-lg border-t border-white/10 bg-white/20 p-3">
-        <div className="flex flex-col items-center gap-5">
-          <div>
-            <span className="text-4xl">👋</span>
-            <h3 className="mt-2 font-semibold leading-tight">
-              Hello, this is the first time you&apos;re using Lume
-            </h3>
-            <p className="text-sm text-white/70">
-              Lume is downloading all events since the last 24 hours. It will auto refresh
-              when it done, please be patient
-            </p>
-          </div>
-          <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
-            <div
-              className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth"
-              role="progressbar"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/shared/widgets/eventLoader.tsx

@@ -7,7 +7,7 @@ import { useStronghold } from '@stores/stronghold';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
-export function LoadLatestEvents() {
+export function EventLoader({ firstTime }: { firstTime: boolean }) {
   const { db } = useStorage();
   const { getAllEventsSinceLastLogin } = useNostr();
 
@@ -35,18 +35,31 @@ export function LoadLatestEvents() {
     if (progress === 0) getEvents();
 
     // auto increase progress after 2 secs
-    setInterval(() => setProgress((prev) => (prev += 8)), 2000);
+    setInterval(() => setProgress((prev) => (prev += 5)), 2000);
   }, []);
 
   return (
     <div className="mb-3 px-3">
       <div className="h-max w-full rounded-lg border-t border-white/10 bg-white/20 p-3">
         <div className="flex flex-col items-center gap-3">
-          <div className="text-center">
-            <h3 className="font-semibold leading-tight">
-              Downloading all events from your last login...
-            </h3>
-          </div>
+          {firstTime ? (
+            <div>
+              <span className="text-4xl">👋</span>
+              <h3 className="mt-2 font-semibold leading-tight">
+                Hello, this is the first time you&apos;re using Lume
+              </h3>
+              <p className="text-sm text-white/70">
+                Lume is downloading all events since the last 24 hours. It will auto
+                refresh when it done, please be patient
+              </p>
+            </div>
+          ) : (
+            <div className="text-center">
+              <h3 className="font-semibold leading-tight">
+                Downloading all events from your last login...
+              </h3>
+            </div>
+          )}
           <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
             <div
               className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth"

src/shared/widgets/index.ts

@@ -14,5 +14,4 @@ export * from './nostrBand/trendingAccounts';
 export * from './tmp/feeds';
 export * from './tmp/hashtag';
 export * from './other/learnNostr';
-export * from './emptyList';
-export * from './loadLatestEvents';
+export * from './eventLoader';

src/shared/widgets/local/network.tsx

@@ -16,7 +16,7 @@ import {
 } from '@shared/notes';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
-import { EmptyList, LoadLatestEvents, WidgetWrapper } from '@shared/widgets';
+import { EventLoader, WidgetWrapper } from '@shared/widgets';
 
 import { useStronghold } from '@stores/stronghold';
 
@@ -111,10 +111,10 @@ export function LocalNetworkWidget() {
             </div>
           </div>
         ) : dbEvents.length === 0 ? (
-          <EmptyList />
+          <EventLoader firstTime={true} />
         ) : (
           <VList className="scrollbar-hide h-full">
-            {!isFetched ? <LoadLatestEvents /> : null}
+            {!isFetched ? <EventLoader firstTime={false} /> : null}
             {dbEvents.map((item) => renderItem(item))}
             <div className="flex items-center justify-center px-3 py-1.5">
               {dbEvents.length > 0 ? (