Add isLoading condition to revision table

packages/app/src/components/InfiniteScroll.tsx

@@ -38,7 +38,7 @@ const LoadingIndicator = (): React.ReactElement => {
   );
 };
 
-const InfiniteScroll = <E,>(props: Props<E>): React.ReactElement<Props<E>> => {
+const InfiniteScroll = <E, >(props: Props<E>): React.ReactElement<Props<E>> => {
   const {
     swrInifiniteResponse: {
       setSize, isValidating,
@@ -63,13 +63,15 @@ const InfiniteScroll = <E,>(props: Props<E>): React.ReactElement<Props<E>> => {
     <>
       {children}
 
-      <div style={{ position: 'relative' }}>
-        <div ref={ref} style={{ position: 'absolute', top: offset }}></div>
-        {isReachingEnd
-          ? endingIndicator
-          : loadingIndicator || <LoadingIndicator />
-        }
-      </div>
+      { isLoadingIndicatorShown && (
+        <div style={{ position: 'relative' }}>
+          <div ref={ref} style={{ position: 'absolute', top: offset }}></div>
+          {isReachingEnd
+            ? endingIndicator
+            : loadingIndicator || <LoadingIndicator />
+          }
+        </div>
+      )}
     </>
   );
 };

packages/app/src/components/PageHistory/PageRevisionTable.tsx

@@ -28,11 +28,10 @@ export const PageRevisionTable = (props: PageRevisionTAble): JSX.Element => {
     onClose,
   } = props;
 
-
   const { data: currentPageId } = useCurrentPageId();
   const swrInifiniteResponse = useSWRxInfinitePageRevisions(currentPageId);
 
-  const { data: revisionsData } = swrInifiniteResponse;
+  const { data: revisionsData, isLoading } = swrInifiniteResponse;
   const revisions = revisionsData && revisionsData[0];
   const oldestRevision = revisions && revisions[revisions.length - 1];
 
@@ -149,36 +148,42 @@ export const PageRevisionTable = (props: PageRevisionTAble): JSX.Element => {
 
   return (
     <>
-      <table className={`${styles['revision-history-table']} table revision-history-table`}>
-        <thead>
-          <tr className="d-flex">
-            <th className="col">{t('page_history.revision')}</th>
-            <th className="col-1">{t('page_history.comparing_source')}</th>
-            <th className="col-2">{t('page_history.comparing_target')}</th>
-          </tr>
-        </thead>
-        <tbody className="overflow-auto d-block">
-          {revisions && (
-            <InfiniteScroll
-              swrInifiniteResponse={swrInifiniteResponse}
-              isReachingEnd={isReachingEnd}
-              isLoadingIndicatorShown ={false}
-            >
-              {pageRevisions => pageRevisions.map((revision, idx) => {
-
-                const previousRevision = (idx + 1 < revisions?.length) ? revisions[idx + 1] : revision;
-
-                const isOldestRevision = revision === oldestRevision;
-                const latestRevision = revisions[0];
-
-                // set 'true' if undefined for backward compatibility
-                const hasDiff = revision.hasDiffToPrev !== false;
-                return renderRow(revision, previousRevision, latestRevision, isOldestRevision, hasDiff);
-              })}
-            </InfiniteScroll>
-          )}
-        </tbody>
-      </table>
+      { !isLoading ? (
+        <table className={`${styles['revision-history-table']} table revision-history-table`}>
+          <thead>
+            <tr className="d-flex">
+              <th className="col">{t('page_history.revision')}</th>
+              <th className="col-1">{t('page_history.comparing_source')}</th>
+              <th className="col-2">{t('page_history.comparing_target')}</th>
+            </tr>
+          </thead>
+          <tbody className="overflow-auto d-block">
+            {revisions && (
+              <InfiniteScroll
+                swrInifiniteResponse={swrInifiniteResponse}
+                isReachingEnd={isReachingEnd}
+                isLoadingIndicatorShown ={false}
+              >
+                { revisionsData != null && revisionsData.map(apiResult => apiResult).flat()
+                  .map((revision, idx) => {
+                    const previousRevision = (idx + 1 < revisions?.length) ? revisions[idx + 1] : revision;
+
+                    const isOldestRevision = revision === oldestRevision;
+                    const latestRevision = revisions[0];
+
+                    // set 'true' if undefined for backward compatibility
+                    const hasDiff = revision.hasDiffToPrev !== false;
+                    return renderRow(revision, previousRevision, latestRevision, isOldestRevision, hasDiff);
+                  })
+                }
+              </InfiniteScroll>
+            )}
+          </tbody>
+        </table>) : (
+        <div className="text-muted text-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      )}
 
       { sourceRevision && targetRevision && (
         <RevisionComparer

packages/app/src/components/User/UserDate.jsx

@@ -25,7 +25,7 @@ export default class UserDate extends React.Component {
 }
 
 UserDate.propTypes = {
-  dateTime: PropTypes.instanceOf(Date).isRequired,
+  dateTime: PropTypes.string.isRequired,
   format: PropTypes.string,
   className: PropTypes.string,
 };

packages/app/src/stores/page.tsx

@@ -60,7 +60,7 @@ export const useSWRMUTxCurrentPage = (): SWRMutationResponse<IPagePopulatedToSho
 
   return useSWRMutation(
     key,
-    async () => {
+    async() => {
       return apiv3Get<{ page: IPagePopulatedToShowRevision }>('/page', { pageId: currentPageId, shareLinkId, revisionId })
         .then(result => result.data.page)
         .catch((errs) => {
@@ -105,9 +105,9 @@ export const mutateAllPageInfo = (): Promise<void[]> => {
 };
 
 export const useSWRxPageInfo = (
-  pageId: string | null | undefined,
-  shareLinkId?: string | null,
-  initialData?: IPageInfoForEntity,
+    pageId: string | null | undefined,
+    shareLinkId?: string | null,
+    initialData?: IPageInfoForEntity,
 ): SWRResponse<IPageInfo | IPageInfoForOperation> => {
 
   // assign null if shareLinkId is undefined in order to identify SWR key only by pageId
@@ -145,9 +145,9 @@ export const useSWRxPageRevision = (pageId: string, revisionId: Ref<IRevision>):
 };
 
 export const useSWRxPageRevisions = (
-  page: number, // page number of pagination
-  limit: number, // max number of pages in one paginate
-  pageId: string | null | undefined,
+    page: number, // page number of pagination
+    limit: number, // max number of pages in one paginate
+    pageId: string | null | undefined,
 ): SWRResponse<IRevisionsForPagination, Error> => {
 
   return useSWRImmutable(
@@ -165,7 +165,7 @@ export const useSWRxPageRevisions = (
 };
 
 export const useSWRxInfinitePageRevisions = (
-  pageId: string | null | undefined,
+    pageId: string | null | undefined,
 ): SWRInfiniteResponse<IRevisionHasPageId[], Error> => {
   const LIMIT = 10;
   const getKey = (page: number) => {
@@ -189,7 +189,7 @@ export const useSWRxInfinitePageRevisions = (
  * Grant normalization fetching hooks
  */
 export const useSWRxIsGrantNormalized = (
-  pageId: string | null | undefined,
+    pageId: string | null | undefined,
 ): SWRResponse<IResIsGrantNormalized, Error> => {
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -206,7 +206,7 @@ export const useSWRxIsGrantNormalized = (
 };
 
 export const useSWRxApplicableGrant = (
-  pageId: string | null | undefined,
+    pageId: string | null | undefined,
 ): SWRResponse<IRecordApplicableGrant, Error> => {
 
   return useSWRImmutable(