use suspense

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -1,11 +1,10 @@
 import React, {
-  memo, useCallback, useEffect, useState,
+  memo, useCallback, useEffect,
 } from 'react';
 
 import { isPopulated, type IPageHasId } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { UserPicture, FootstampIcon } from '@growi/ui/dist/components';
-import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 
 import FormattedDistanceDate from '~/components/FormattedDistanceDate';
@@ -109,7 +108,7 @@ type HeaderProps = {
 const PER_PAGE = 20;
 export const RecentChangesHeader = ({ isSmall, onSizeChange }: HeaderProps): JSX.Element => {
 
-  const { mutate } = useSWRINFxRecentlyUpdated(PER_PAGE);
+  const { mutate } = useSWRINFxRecentlyUpdated(PER_PAGE, { suspense: true });
 
   const retrieveSizePreferenceFromLocalStorage = useCallback(() => {
     if (window.localStorage.isRecentChangesSidebarSmall === 'true') {
@@ -151,7 +150,7 @@ type ContentProps = {
 }
 
 export const RecentChangesContent = ({ isSmall }: ContentProps): JSX.Element => {
-  const swrInifinitexRecentlyUpdated = useSWRINFxRecentlyUpdated(PER_PAGE);
+  const swrInifinitexRecentlyUpdated = useSWRINFxRecentlyUpdated(PER_PAGE, { suspense: true });
   const { data } = swrInifinitexRecentlyUpdated;
 
   const isEmpty = data?.[0]?.pages.length === 0;

apps/app/src/stores/page-listing.tsx

@@ -4,7 +4,9 @@ import type {
   Nullable, HasObjectId,
   IDataWithMeta, IPageHasId, IPageInfoForListing, IPageInfoForOperation,
 } from '@growi/core';
-import useSWR, { Arguments, mutate, SWRResponse } from 'swr';
+import useSWR, {
+  mutate, type SWRConfiguration, type SWRResponse, type Arguments,
+} from 'swr';
 import useSWRImmutable from 'swr/immutable';
 import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite';
 
@@ -30,7 +32,7 @@ type RecentApiResult = {
   totalCount: number,
   offset: number,
 }
-export const useSWRINFxRecentlyUpdated = (limit: number) : SWRInfiniteResponse<RecentApiResult, Error> => {
+export const useSWRINFxRecentlyUpdated = (limit: number, config?: SWRConfiguration) : SWRInfiniteResponse<RecentApiResult, Error> => {
   return useSWRInfinite(
     (pageIndex, previousPageData) => {
       if (previousPageData != null && previousPageData.pages.length === 0) return null;
@@ -44,6 +46,7 @@ export const useSWRINFxRecentlyUpdated = (limit: number) : SWRInfiniteResponse<R
     },
     ([endpoint, offset, limit]) => apiv3Get<RecentApiResult>(endpoint, { offset, limit }).then(response => response.data),
     {
+      ...config,
       revalidateFirstPage: false,
       revalidateAll: false,
     },