feat: add progress bar

Author: martinjagodic

packages/decap-cms-backend-github/src/implementation.tsx

@@ -881,7 +881,7 @@ export default class GitHub implements Implementation {
 
   async traverseCursor(cursor: Cursor, action: string) {
     const meta = cursor.meta!;
-    
+
     // Check if this is a GraphQL paginated cursor (has folder/extension) or old-style (has files array)
     const hasFiles = cursor.data!.has('files');
     const hasFolder = cursor.data!.has('folder');

packages/decap-cms-core/src/actions/entries.ts

@@ -50,6 +50,7 @@ export const ENTRY_FAILURE = 'ENTRY_FAILURE';
 export const ENTRIES_REQUEST = 'ENTRIES_REQUEST';
 export const ENTRIES_SUCCESS = 'ENTRIES_SUCCESS';
 export const ENTRIES_FAILURE = 'ENTRIES_FAILURE';
+export const ENTRIES_PROGRESS = 'ENTRIES_PROGRESS';
 
 export const SORT_ENTRIES_REQUEST = 'SORT_ENTRIES_REQUEST';
 export const SORT_ENTRIES_SUCCESS = 'SORT_ENTRIES_SUCCESS';
@@ -160,6 +161,18 @@ export function entriesFailed(collection: Collection, error: Error) {
   };
 }
 
+export function entriesProgress(collection: Collection, loadedCount: number, totalCount: number) {
+  return {
+    type: ENTRIES_PROGRESS,
+    payload: {
+      collection: collection.get('name'),
+      loadedCount,
+      totalCount,
+      percentage: totalCount > 0 ? Math.round((loadedCount / totalCount) * 100) : 0,
+    },
+  };
+}
+
 export async function getAllEntries(state: State, collection: Collection) {
   const backend = currentBackend(state.config);
   const integration = selectIntegration(state, collection.get('name'), 'listEntries');
@@ -605,6 +618,9 @@ export function loadEntries(collection: Collection, page = 0) {
         const usingOld = cursor.meta!.get('usingOldPaginationAPI');
         const entries = usingOld ? initial.entries.reverse() : initial.entries;
         const hasMore = cursor.actions!.has('next');
+        const totalCount = cursor.meta?.get('count') || 0;
+
+        // Dispatch initial entries
         dispatch(
           entriesLoaded(
             collection,
@@ -615,8 +631,15 @@ export function loadEntries(collection: Collection, page = 0) {
             hasMore,
           ),
         );
+
+        // Dispatch progress if we know the total
+        if (totalCount > 0) {
+          dispatch(entriesProgress(collection, entries.length, totalCount));
+        }
+
         // Stream subsequent pages
         let currentCursor = cursor;
+        let loadedCount = entries.length;
         while (currentCursor.actions!.has('next')) {
           const { entries: moreEntries, cursor: newCursor } = await traverseCursor(
             provider as unknown as Backend,
@@ -626,6 +649,8 @@ export function loadEntries(collection: Collection, page = 0) {
           const usingOldMore = newCursor.meta!.get('usingOldPaginationAPI');
           const pageEntries = usingOldMore ? moreEntries.reverse() : moreEntries;
           const more = newCursor.actions!.has('next');
+          loadedCount += pageEntries.length;
+
           dispatch(
             entriesLoaded(
               collection,
@@ -636,6 +661,12 @@ export function loadEntries(collection: Collection, page = 0) {
               more,
             ),
           );
+
+          // Dispatch progress update
+          if (totalCount > 0) {
+            dispatch(entriesProgress(collection, loadedCount, totalCount));
+          }
+
           currentCursor = newCursor;
         }
       } else {

packages/decap-cms-core/src/components/Collection/Entries/Entries.js

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { translate } from 'react-polyglot';
-import { Loader, lengths } from 'decap-cms-ui-default';
+import { Loader, lengths, ProgressBar } from 'decap-cms-ui-default';
 
 import EntryListing from './EntryListing';
 
@@ -30,6 +30,7 @@ function Entries({
   getUnpublishedEntries,
   filterTerm,
   error,
+  progress,
 }) {
   const loadingMessages = [
     t('collection.entries.loadingEntries'),
@@ -57,7 +58,16 @@ function Entries({
           filterTerm={filterTerm}
         />
         {isFetching && page !== undefined && entries.size > 0 ? (
-          <PaginationMessage>{t('collection.entries.loadingEntries')}</PaginationMessage>
+          progress && progress.totalCount > 0 ? (
+            <ProgressBar
+              loadedCount={progress.loadedCount}
+              totalCount={progress.totalCount}
+              percentage={progress.percentage}
+              message={t('collection.entries.loadingEntries')}
+            />
+          ) : (
+            <PaginationMessage>{t('collection.entries.loadingEntries')}</PaginationMessage>
+          )
         ) : null}
       </>
     );
@@ -90,6 +100,11 @@ Entries.propTypes = {
   getUnpublishedEntries: PropTypes.func,
   filterTerm: PropTypes.string,
   error: PropTypes.string,
+  progress: PropTypes.shape({
+    loadedCount: PropTypes.number,
+    totalCount: PropTypes.number,
+    percentage: PropTypes.number,
+  }),
 };
 
 export default translate()(Entries);

packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js

@@ -146,6 +146,7 @@ export class EntriesCollection extends React.Component {
       getUnpublishedEntries,
       filterTerm,
       error,
+      progress,
     } = this.props;
 
     const EntriesToRender = ({ entries }) => {
@@ -163,6 +164,7 @@ export class EntriesCollection extends React.Component {
           getUnpublishedEntries={getUnpublishedEntries}
           filterTerm={filterTerm}
           error={error}
+          progress={progress}
         />
       );
     };
@@ -231,6 +233,7 @@ function mapStateToProps(state, ownProps) {
     : true;
 
   const error = state.entries.getIn(['pages', collection.get('name'), 'error']);
+  const progress = state.entries.getIn(['pages', collection.get('name'), 'progress']);
 
   return {
     collection,
@@ -245,6 +248,7 @@ function mapStateToProps(state, ownProps) {
     unpublishedEntriesLoaded,
     isEditorialWorkflowEnabled,
     error,
+    progress,
     getWorkflowStatus: (collectionName, slug) => {
       const unpublishedEntry = selectUnpublishedEntry(state, collectionName, slug);
       return unpublishedEntry ? unpublishedEntry.get('status') : null;

packages/decap-cms-core/src/reducers/__tests__/entries.spec.js

@@ -46,6 +46,7 @@ describe('entries', () => {
               posts: {
                 page: 0,
                 ids: ['a', 'b'],
+                isFetching: false,
               },
             },
           }),

packages/decap-cms-core/src/reducers/entries.ts

@@ -20,6 +20,7 @@ import {
   ENTRIES_REQUEST,
   ENTRIES_SUCCESS,
   ENTRIES_FAILURE,
+  ENTRIES_PROGRESS,
   ENTRY_DELETE_SUCCESS,
   SORT_ENTRIES_REQUEST,
   SORT_ENTRIES_SUCCESS,
@@ -222,6 +223,22 @@ function entries(
         map.setIn(['pages', action.meta.collection, 'error'], action.payload);
       });
 
+    case ENTRIES_PROGRESS: {
+      const payload = action.payload as {
+        collection: string;
+        loadedCount: number;
+        totalCount: number;
+        percentage: number;
+      };
+      return state.withMutations(map => {
+        map.setIn(['pages', payload.collection, 'progress'], {
+          loadedCount: payload.loadedCount,
+          totalCount: payload.totalCount,
+          percentage: payload.percentage,
+        });
+      });
+    }
+
     case ENTRY_FAILURE: {
       const payload = action.payload as EntryFailurePayload;
       return state.withMutations(map => {

packages/decap-cms-ui-default/package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "develop": "npm run build:esm -- --watch",
     "build": "cross-env NODE_ENV=production webpack",
-    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward --extensions \".js,.jsx,.ts,.tsx\""
   },
   "dependencies": {
     "react-aria-menubutton": "^7.0.0",

packages/decap-cms-ui-default/src/ProgressBar.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
+const shimmer = keyframes`
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+`;
+
+const ProgressContainer = styled.div`
+  width: ${(props: { width?: string }) => props.width || '100%'};
+  max-width: 600px;
+  margin: 16px auto;
+  padding: 0 20px;
+`;
+
+const ProgressBarWrapper = styled.div`
+  width: 100%;
+  height: 8px;
+  background-color: #e8eaed;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+`;
+
+const ProgressBarFill = styled.div<{ percentage: number }>`
+  height: 100%;
+  width: ${props => props.percentage}%;
+  background: linear-gradient(
+    90deg,
+    #3b82f6 0%,
+    #60a5fa 25%,
+    #3b82f6 50%,
+    #60a5fa 75%,
+    #3b82f6 100%
+  );
+  background-size: 1000px 100%;
+  animation: ${shimmer} 2s infinite linear;
+  border-radius: 4px;
+  transition: width 0.3s ease-out;
+`;
+
+const ProgressText = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 13px;
+  color: #5c6873;
+`;
+
+const ProgressMessage = styled.span`
+  font-weight: 500;
+`;
+
+const ProgressCount = styled.span`
+  font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
+  color: #3b82f6;
+`;
+
+export interface ProgressBarProps {
+  loadedCount: number;
+  totalCount: number;
+  percentage: number;
+  width?: string;
+  message?: string;
+}
+
+export function ProgressBar({
+  loadedCount,
+  totalCount,
+  percentage,
+  width,
+  message = 'Loading entries',
+}: ProgressBarProps) {
+  return (
+    <ProgressContainer width={width}>
+      <ProgressBarWrapper>
+        <ProgressBarFill percentage={percentage} />
+      </ProgressBarWrapper>
+      <ProgressText>
+        <ProgressMessage>{message}...</ProgressMessage>
+        <ProgressCount>
+          {loadedCount} / {totalCount} ({percentage}%)
+        </ProgressCount>
+      </ProgressText>
+    </ProgressContainer>
+  );
+}
+
+export default ProgressBar;

packages/decap-cms-ui-default/src/index.js

@@ -14,6 +14,7 @@ import AuthenticationPage, { renderPageLogo } from './AuthenticationPage';
 import WidgetPreviewContainer from './WidgetPreviewContainer';
 import ObjectWidgetTopBar from './ObjectWidgetTopBar';
 import GoBackButton from './GoBackButton';
+import ProgressBar from './ProgressBar';
 import {
   fonts,
   colorsRaw,
@@ -49,6 +50,7 @@ export const DecapCmsUiDefault = {
   AuthenticationPage,
   WidgetPreviewContainer,
   ObjectWidgetTopBar,
+  ProgressBar,
   fonts,
   colorsRaw,
   colors,
@@ -83,6 +85,7 @@ export {
   AuthenticationPage,
   WidgetPreviewContainer,
   ObjectWidgetTopBar,
+  ProgressBar,
   fonts,
   colorsRaw,
   colors,