packages/app/src/Element/NoteTime.tsx

@@ -7,11 +7,12 @@ const DayInMs = HourInMs * 24;
 export interface NoteTimeProps {
   from: number;
   fallback?: string;
+  displayAbsoluteTime?: boolean;
 }
 
 export default function NoteTime(props: NoteTimeProps) {
   const [time, setTime] = useState<string>();
-  const { from, fallback } = props;
+  const { from, fallback, displayAbsoluteTime } = props;
   const absoluteTime = new Intl.DateTimeFormat(undefined, {
     dateStyle: "medium",
     timeStyle: "long",
@@ -59,7 +60,7 @@ export default function NoteTime(props: NoteTimeProps) {
 
   return (
     <time dateTime={isoDate} title={absoluteTime}>
-      {time}
+      {displayAbsoluteTime ? absoluteTime : time}
     </time>
   );
 }

packages/app/src/Element/Timeline.tsx

@@ -15,6 +15,8 @@ import NoteReaction from "Element/NoteReaction";
 import useModeration from "Hooks/useModeration";
 import ProfilePreview from "Element/ProfilePreview";
 import Skeleton from "Element/Skeleton";
+import NoteTime from "./NoteTime";
+import Spinner from "Icons/Spinner";
 
 export interface TimelineProps {
   postsOnly: boolean;
@@ -108,6 +110,17 @@ const Timeline = (props: TimelineProps) => {
     }
   }
 
+  function isSearchingMessageShown() {
+    //show in ProfilePage
+    if (props.subject.type === "pubkey" && props.subject.discriminator !== "follows") {
+      return true;
+    }
+    if (props.subject.type === "keyword") {
+      return true;
+    }
+    return false;
+  }
+
   return (
     <div className="main-content">
       {latestFeed.length > 0 && (
@@ -138,6 +151,18 @@ const Timeline = (props: TimelineProps) => {
       )}
       {mainFeed.map(eventElement)}
       <LoadMore onLoadMore={feed.loadMore} shouldLoadMore={!feed.loading}>
+        {isSearchingMessageShown() && (
+          <div>
+            <Spinner /> <FormattedMessage defaultMessage="Searching for stuff from" />{" "}
+            <b>
+              <NoteTime from={feed.since * 1000} displayAbsoluteTime />
+            </b>{" "}
+            <FormattedMessage defaultMessage="upto" />{" "}
+            <b>
+              <NoteTime from={feed.until * 1000} displayAbsoluteTime />
+            </b>
+          </div>
+        )}
         <Skeleton width="100%" height="120px" margin="0 0 16px 0" />
         <Skeleton width="100%" height="120px" margin="0 0 16px 0" />
         <Skeleton width="100%" height="120px" margin="0 0 16px 0" />

packages/app/src/Feed/TimelineFeed.ts

@@ -180,6 +180,8 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
     main: main.data,
     related: related.data,
     latest: latest.data,
+    since: since,
+    until: until,
     loading: main.loading(),
     loadMore: () => {
       if (main.data) {