https://github.com/ecency/vision-next/issues/108

Added loading more indicator for profile and communities

src/app/(dynamicPages)/community/[community]/_components/community-content-infinite-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { DetectBottom, EntryListContent } from "@/features/shared";
+import { DetectBottom, EntryListContent, EntryListContentLoading } from "@/features/shared";
 import React, { useMemo } from "react";
 import { usePostsFeedQuery } from "@/api/queries";
 import { Community, Entry } from "@/entities";
@@ -11,7 +11,7 @@ interface Props {
 }
 
 export function CommunityContentInfiniteList({ section, community }: Props) {
-  const { fetchNextPage, data } = usePostsFeedQuery(section, community.name);
+  const { fetchNextPage, data, isFetching } = usePostsFeedQuery(section, community.name);
 
   const entryList = useMemo(
     () =>
@@ -32,6 +32,8 @@ export function CommunityContentInfiniteList({ section, community }: Props) {
         showEmptyPlaceholder={false}
       />
       <DetectBottom onBottom={() => fetchNextPage()} />
+
+      {isFetching && <EntryListContentLoading />}
     </>
   );
 }

src/app/(dynamicPages)/profile/[username]/_components/profile-entries-infinite-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { DetectBottom, EntryListContent } from "@/features/shared";
+import { DetectBottom, EntryListContent, EntryListContentLoading } from "@/features/shared";
 import React, { useMemo } from "react";
 import { usePostsFeedQuery } from "@/api/queries";
 import { Entry, FullAccount } from "@/entities";
@@ -11,7 +11,7 @@ interface Props {
 }
 
 export function ProfileEntriesInfiniteList({ section, account }: Props) {
-  const { fetchNextPage, data } = usePostsFeedQuery(section, `@${account.name}`);
+  const { fetchNextPage, data, isFetching } = usePostsFeedQuery(section, `@${account.name}`);
 
   const entryList = useMemo(
     () =>
@@ -34,6 +34,7 @@ export function ProfileEntriesInfiniteList({ section, account }: Props) {
         showEmptyPlaceholder={false}
       />
       <DetectBottom onBottom={() => fetchNextPage()} />
+      {isFetching && <EntryListContentLoading />}
     </>
   );
 }

src/features/shared/entry-list-content/entry-list-content-loading.tsx

@@ -0,0 +1,9 @@
+import i18next from "i18next";
+
+export function EntryListContentLoading() {
+  return (
+    <div className="flex items-center justify-center p-4">
+      {i18next.t("decks.columns.infinite-loading")}
+    </div>
+  );
+}

src/features/shared/entry-list-content/index.tsx

@@ -92,3 +92,5 @@ export function EntryListContent({
     </>
   );
 }
+
+export * from "./entry-list-content-loading";