Correct loading behaviour while pressing load more button

CirclesUBI · Sep 7, 2023 · c31d8af · c31d8af
1 parent e31aed9
commit c31d8af
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/src/components/ActivityStream.js b/src/components/ActivityStream.js
@@ -23,7 +23,8 @@ const { ActivityTypes } = core.activity;
 const ActivityStream = ({
   activities,
   filterType,
-  isLoading,
+  isLoadingInitial,
+  isLoadingMore,
   isMoreAvailable,
   lastSeenAt,
   lastUpdatedAt,
@@ -43,26 +44,31 @@ const ActivityStream = ({
 
   return (
     <Fragment>
-      {!isLoading && (
+      {!isLoadingInitial && (
         <ActivityStreamList
           activities={activities}
           filterType={filterType}
           lastSeenAt={lastSeenAt}
           lastUpdatedAt={lastUpdatedAt}
         />
       )}
-      {isLoading && (
-        <Box mx="auto" my={2} textAlign="center">
-          <CircularProgress />
-        </Box>
-      )}
-      {!isLoading && isMoreAvailable && onLoadMore && (
+      {!isLoadingInitial && isMoreAvailable && onLoadMore && !isLoadingMore && (
         <Box my={2}>
-          <Button disabled={isLoading} fullWidth isOutline onClick={onLoadMore}>
+          <Button
+            disabled={isLoadingInitial}
+            fullWidth
+            isOutline
+            onClick={onLoadMore}
+          >
             {translate('ActivityStream.buttonLoadMore')}
           </Button>
         </Box>
       )}
+      {(isLoadingInitial || isLoadingMore) && (
+        <Box mx="auto" my={2} textAlign="center">
+          <CircularProgress />
+        </Box>
+      )}
     </Fragment>
   );
 };
@@ -171,7 +177,8 @@ const ActivityStreamList = ({
 ActivityStream.propTypes = {
   activities: PropTypes.array.isRequired,
   filterType: PropTypes.string,
-  isLoading: PropTypes.bool.isRequired,
+  isLoadingInitial: PropTypes.bool.isRequired,
+  isLoadingMore: PropTypes.bool.isRequired,
   isMoreAvailable: PropTypes.bool.isRequired,
   lastSeenAt: PropTypes.string,
   lastUpdatedAt: PropTypes.string,

diff --git a/src/components/ActivityStreamWithTabs.js b/src/components/ActivityStreamWithTabs.js
@@ -160,7 +160,9 @@ const ActivityStreamWithTabs = ({ basePath = ACTIVITIES_PATH }) => {
     selectedCategory !== QUERY_FILTER_MAP.news
       ? categories[selectedCategory]
       : news;
-  const isLoading = activity?.isLoadingMore || activity?.lastUpdated === 0;
+  const isLoadingInitial =
+    activity?.isLoadingInitial || activity?.lastUpdated === 0;
+  const isLoadingMore = activity?.isLoadingMore || activity?.lastUpdated === 0;
 
   const handleLoadMore = () => {
     if (selectedCategory === QUERY_FILTER_MAP.news) {
@@ -336,7 +338,8 @@ const ActivityStreamWithTabs = ({ basePath = ACTIVITIES_PATH }) => {
         <ActivityStream
           activities={activity.activities}
           filterType={filterTransactionsType}
-          isLoading={isLoading}
+          isLoadingInitial={isLoadingInitial}
+          isLoadingMore={isLoadingMore}
           isMoreAvailable={activity.isMoreAvailable}
           lastSeenAt={lastSeenAt}
           lastUpdatedAt={activity.lastUpdatedAt}

diff --git a/src/store/activity/reducers.js b/src/store/activity/reducers.js
@@ -23,7 +23,8 @@ export const CATEGORIES = [
 const initialStateItem = {
   activities: [],
   isError: false,
-  isLoadingMore: true,
+  isLoadingInitial: true,
+  isLoadingMore: false,
   isMoreAvailable: true,
   lastTimestamp: 0,
   lastUpdatedAt: null,
@@ -236,6 +237,7 @@ const activityReducer = (state = initialState, action) => {
       return update(state, {
         mutualActivities: {
           activities: { $set: newActivities },
+          isLoadingInitial: { $set: false },
           isLoadingMore: { $set: false },
           offset: { $set: action.meta.offset },
           ...(action.meta.activities.length < PAGE_SIZE
@@ -271,6 +273,7 @@ const activityReducer = (state = initialState, action) => {
       return update(state, {
         news: {
           activities: { $set: newActivities },
+          isLoadingInitial: { $set: false },
           isLoadingMore: { $set: false },
           offset: { $set: action.meta.offset },
           ...(action.meta.activities.length < PAGE_SIZE
@@ -310,6 +313,7 @@ const activityReducer = (state = initialState, action) => {
             ...(action.meta.activities.length < PAGE_SIZE
               ? { isMoreAvailable: { $set: false } }
               : {}),
+            isLoadingInitial: { $set: false },
             isLoadingMore: { $set: false },
             lastTimestamp: { $set: action.meta.lastTimestamp },
             lastUpdatedAt: { $set: DateTime.local().toISO() },