chore: add small loader for subPostItem Query

src/components/Loader/index.tsx

@@ -1,3 +1,4 @@
+import { SmallLoaderUI } from './small-ui';
 import { LoaderUI } from './ui';
 
 export interface LoaderProp {
@@ -15,3 +16,11 @@ export const Loader: React.FC<LoaderProp> = ({ isLoading }) => {
     </>
   );
 };
+
+export const SmallLoader: React.FC<LoaderProp> = ({ isLoading }) => {
+  return (
+    <>
+      {isLoading && <SmallLoaderUI />}
+    </>
+  );
+};

src/components/Loader/small-ui.tsx

@@ -0,0 +1,13 @@
+import styles from './small.module.scss';
+// Source: https://loading.io/css/
+
+export const SmallLoaderUI = () => {
+  return (
+    <div className={styles['lds-facebook']}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+};

src/components/Loader/small.module.scss

@@ -0,0 +1,40 @@
+.lds-facebook,
+.lds-facebook div {
+  box-sizing: border-box;
+}
+.lds-facebook {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+.lds-facebook div {
+  display: inline-block;
+  position: absolute;
+  left: 2px;
+  width: 4px;
+  background: currentColor;
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+.lds-facebook div:nth-child(1) {
+  left: 2px;
+  animation-delay: -0.24s;
+}
+.lds-facebook div:nth-child(2) {
+  left: 8px;
+  animation-delay: -0.12s;
+}
+.lds-facebook div:nth-child(3) {
+  left: 14px;
+  animation-delay: 0s;
+}
+@keyframes lds-facebook {
+  0% {
+    top: 2px;
+    height: 16px;
+  }
+  50%, 100% {
+    top: 6px;
+    height: 8px;
+  }
+}

src/components/Loader/ui.tsx

@@ -1,9 +1,9 @@
-import './index.module.scss';
+import styles from './index.module.scss';
 // Source: https://loading.io/css/
 
 export const LoaderUI = () => {
   return (
-    <div className="lds-ellipsis">
+    <div className={styles["lds-ellipsis"]}>
       <div></div>
       <div></div>
       <div></div>

src/components/PostItems/PostContent/Embed/Nevent.tsx

@@ -31,11 +31,11 @@ export const Nevent: React.FC<{
     <div className={styles.refLink}>
       <a
         href={
-          '/' + i18n?.language + Paths.user + '/' + nevent.decodedMetadata.id
+          '/' + i18n?.language + Paths.event + '/' + nevent.decodedMetadata.id
         }
         target="_self"
       >
-        nevent@${nevent.decodedMetadata.id}
+        nevent@{nevent.decodedMetadata.id}
       </a>
     </div>
   );

src/components/PostItems/PostContent/Embed/Nprofile.tsx

@@ -34,13 +34,13 @@ export const Nprofile: React.FC<{ nprofile: NprofileResult }> = ({
   }
 
   return (
-    <div className={styles.refLink}>
+    <span className={styles.refLink}>
       <a
         href={i18n?.language + Paths.user + nprofile.decodedMetadata.pubkey}
         target="_blank"
       >
         nprofile@{shortifyPublicKey(nprofile.decodedMetadata.pubkey)}
       </a>
-    </div>
+    </span>
   );
 };

src/components/PostItems/PostContent/Embed/Npub.tsx

@@ -30,10 +30,10 @@ export const Npub: React.FC<{npub: NpubResult}> = ({npub}) => {
   }
 
   return (
-    <div className={styles.refLink}>
+    <span className={styles.refLink}>
       <a href={i18n?.language + Paths.user + npub.pubkey} target="_blank">
         npub@{shortifyPublicKey(npub.pubkey)}
       </a>
-    </div>
+    </span>
   );
 };

src/components/PostItems/PostContent/Embed/index.tsx

@@ -6,6 +6,7 @@ import { Note } from './Note';
 import { Nprofile } from './Nprofile';
 import { Npub } from './Npub';
 import { Nrelay } from './Nrelay';
+import { SmallLoader } from 'components/Loader';
 import {
   NaddrResult,
   NeventResult,
@@ -58,6 +59,6 @@ export const NostrEmbed: React.FC<{ data: ParsedFragment }> = ({ data }) => {
   return transformFragment ? (
     <ParsedNostrEmbed res={transformFragment} />
   ) : (
-    <p>parsing nostr embed..</p>
+    <SmallLoader isLoading={true} />
   );
 };

src/components/PostItems/PostContent/index.tsx

@@ -73,7 +73,7 @@ export const PostContent: React.FC<PostContentProp> = ({
 
   const style = expanded
     ? { maxHeight: '100%' }
-    : { maxHeight: '150px', overflow: 'hidden' };
+    : { maxHeight: '350px', overflow: 'hidden' };
 
   return (
     <div>

src/components/PostItems/PostItem/sub.tsx

@@ -9,6 +9,7 @@ import { maxStrings } from 'utils/common';
 import { CallWorker } from 'core/worker/caller';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { Paths } from 'constants/path';
+import { SmallLoader } from 'components/Loader';
 
 import styles from './sub.module.scss';
 import PostArticle from '../PostArticle';
@@ -23,13 +24,15 @@ export const SubPostUI: React.FC<SubPostUIProp> = ({ eventId, worker }) => {
   const router = useRouter();
   const relayUrls = worker?.relays.map(r => r.url) || [];
 
-  const event = useLiveQuery(
+  const [event, loaded] = useLiveQuery(
     dbQuery.createEventByIdQuerier(relayUrls, eventId),
     [eventId],
+    [null, false], // default result: makes 'loaded' false while loading
   );
 
   const [loadedUserProfile, setLoadedUserProfile] =
     useState<EventSetMetadataContent>();
+  const [isReloading, setIsReloading] = useState<boolean>(false);
 
   const loadUserProfile = async () => {
     if (!event) return;
@@ -42,10 +45,17 @@ export const SubPostUI: React.FC<SubPostUIProp> = ({ eventId, worker }) => {
     }
   };
 
-  const tryReloadLastReplyEvent = () => {
-    if (!eventId) return;
-
-    worker?.subMsgByEventIds([eventId]);
+  const tryReloadLastReplyEvent = async () => {
+    if (!eventId || !worker) return;
+    setIsReloading(true);
+    const handle = worker.subMsgByEventIds([eventId]).getIterator();
+    for await (const data of handle) {
+      if (data.event.id == eventId) {
+        setIsReloading(false);
+        break;
+      }
+    }
+    setIsReloading(false);
   };
 
   useEffect(() => {
@@ -82,14 +92,22 @@ export const SubPostUI: React.FC<SubPostUIProp> = ({ eventId, worker }) => {
     );
   }
 
-  return (
-    <div className={styles.replyEvent}>
+  const ReloadUI = isReloading ? (
+    <SmallLoader isLoading={isReloading} />
+  ) : (
+    <>
       <Link href={`${Paths.event + '/' + eventId}`}>
         event@{shortifyEventId(eventId)}
       </Link>
       <Button onClick={tryReloadLastReplyEvent} type="link">
         try reload
       </Button>
+    </>
+  );
+
+  return (
+    <div className={styles.replyEvent}>
+      {loaded ? ReloadUI : <SmallLoader isLoading={true} />}
     </div>
   );
 };

src/components/PostItems/PostRepost/index.tsx

@@ -45,12 +45,13 @@ const PostRepost: React.FC<PostRepostProp> = ({
   }, [event]);
 
   const relayUrls = worker.relays.map(r => r.url) || [];
-  const targetEventFromDb = useLiveQuery(
+  const [targetEventFromDb] = useLiveQuery(
     dbQuery.createEventByIdQuerier(
       relayUrls,
       Nip18.getTargetEventIdRelay(event).id,
     ),
     [event],
+    []
   );
 
   useEffect(() => {

src/core/db/query.ts

@@ -20,22 +20,24 @@ export class Query {
     }
   }
 
-  createEventByIdQuerier(relayUrls: string[], eventId?: EventId) {
+  createEventByIdQuerier(relayUrls: string[], eventId?: EventId): () => Promise<[DbEvent | undefined | null, boolean]> {
     return async () => {
+      const finished = true;
+
       if (!eventId) {
-        return null;
+        return [null, finished];
       }
 
       const normalizeRelayUrls = relayUrls.map(r => normalizeWsUrl(r)); 
       const event = await this.table.get(eventId);
       if (event && relayUrls.length > 0) {
         const seenRelays = event.seen.map(r => normalizeWsUrl(r));
         if(normalizeRelayUrls.some(relay => seenRelays.includes(relay))){
-          return event;
+          return [event, finished];
         }
-        return null;
+        return [null, finished];
       }
-      return event;
+      return [event, finished];
     };
   }