improve startup time

src/shared/widgets/emptyList.tsx

@@ -0,0 +1,61 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function EmptyList() {
+  const { db } = useStorage();
+  const { getAllEventsSinceLastLogin } = useNostr();
+
+  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);
+        // 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/index.ts

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

src/shared/widgets/loadLatestEvents.tsx

@@ -0,0 +1,61 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { useStronghold } from '@stores/stronghold';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function LoadLatestEvents() {
+  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="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>
+          <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/local/network.tsx

@@ -16,7 +16,9 @@ import {
 } from '@shared/notes';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
-import { WidgetWrapper } from '@shared/widgets';
+import { EmptyList, LoadLatestEvents, WidgetWrapper } from '@shared/widgets';
+
+import { useStronghold } from '@stores/stronghold';
 
 import { useNostr } from '@utils/hooks/useNostr';
 import { toRawEvent } from '@utils/rawEvent';
@@ -34,6 +36,7 @@ export function LocalNetworkWidget() {
       getNextPageParam: (lastPage) => lastPage.nextCursor,
     });
 
+  const isFetched = useStronghold((state) => state.isFetched);
   const dbEvents = useMemo(
     () => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
     [data]
@@ -83,7 +86,7 @@ export function LocalNetworkWidget() {
   // subscribe for new event
   // sub will be managed by lru-cache
   useEffect(() => {
-    if (db.account && db.account.network) {
+    if (db.account && db.account.network && dbEvents.length > 0) {
       const filter: NDKFilter = {
         kinds: [NDKKind.Text, NDKKind.Repost],
         authors: db.account.network,
@@ -95,11 +98,11 @@ export function LocalNetworkWidget() {
         await db.createEvent(rawEvent);
       });
     }
-  }, []);
+  }, [data]);
 
   return (
     <WidgetWrapper>
-      <TitleBar title="👋 Network" />
+      <TitleBar title="Network" />
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
@@ -108,21 +111,10 @@ export function LocalNetworkWidget() {
             </div>
           </div>
         ) : dbEvents.length === 0 ? (
-          <div className="flex h-full w-full flex-col items-center justify-center px-3">
-            <div className="flex flex-col items-center gap-4">
-              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
-              <div className="text-center">
-                <h3 className="text-xl font-semibold leading-tight">
-                  Your newsfeed is empty
-                </h3>
-                <p className="text-center text-white/50">
-                  Connect more people to explore more content
-                </p>
-              </div>
-            </div>
-          </div>
+          <EmptyList />
         ) : (
           <VList className="scrollbar-hide h-full">
+            {!isFetched ? <LoadLatestEvents /> : null}
             {dbEvents.map((item) => renderItem(item))}
             <div className="flex items-center justify-center px-3 py-1.5">
               {dbEvents.length > 0 ? (