show fa-spinner icon when loading icon

packages/app/src/components/InAppNotification/AllInAppNotifications.tsx

@@ -5,6 +5,7 @@ import loggerFactory from '~/utils/logger';
 
 import InAppNotificationList from './InAppNotificationList';
 import { withUnstatedContainers } from '../UnstatedUtils';
+import { useSWRxInAppNotifications } from '../../stores/in-app-notification';
 
 const logger = loggerFactory('growi:ALlInAppnotification');
 
@@ -15,20 +16,25 @@ type Props = {
 
 const AllInAppNotifications: FC<Props> = (props: Props) => {
   const { appContainer } = props;
-  const [notifications, setNotifications] = useState([]);
+  // const [notifications, setNotifications] = useState([]);
+  const limit = 6;
+  const { data: inAppNotificationdata, error, mutate } = useSWRxInAppNotifications(limit);
+  console.log('useSWRxInAppNotification_notifications', inAppNotificationdata);
+
   const [isLoaded, setIsLoaded] = useState(false);
 
+
   useEffect(() => {
     fetchNotificationList();
   }, []);
 
 
   const fetchNotificationList = async() => {
-    const limit = 6;
+    // const limit = 6;
     try {
-      const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
+      // const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
 
-      setNotifications(paginationResult.data.docs);
+      // setNotifications(paginationResult.data.docs);
       setIsLoaded(true);
     }
     catch (err) {
@@ -36,6 +42,18 @@ const AllInAppNotifications: FC<Props> = (props: Props) => {
     }
   };
 
+  if (inAppNotificationdata == null) {
+    return (
+      <div className="wiki">
+        <div className="text-muted text-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      </div>
+    );
+  }
+  const notifications = inAppNotificationdata.docs;
+  console.log('notifications!!', notifications);
+
   return (
     <InAppNotificationList notifications={notifications} isLoaded={isLoaded} />
   );

packages/app/src/server/routes/all-in-app-notifications.ts

@@ -3,7 +3,6 @@ import {
 } from 'express';
 
 export const list = (req: Request, res: Response): void => {
-  console.log('hogehoge');
 
   return res.render('me/all-in-app-notifications');
 };

packages/app/src/stores/in-app-notification.ts

@@ -7,10 +7,16 @@ import { IInAppNotification } from '../interfaces/in-app-notification';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useSWRxInAppNotifications = <Data, Error>(
   limit: number,
-): SWRResponse<IInAppNotification[], Error> => {
-  const limitNum = limit;
+): SWRResponse<any, Error> => {
   return useSWR(
     '/in-app-notification/list',
-    endpoint => apiv3Get<{ notifications: IInAppNotification[], limitNum: number }>(endpoint).then(response => response.data?.notifications),
+    // endpoint => apiv3Get<{ notifications: IInAppNotification[], limit: number }>(endpoint).then(response => response.data?.notifications),
+    endpoint => apiv3Get(endpoint, { limit }).then((response) => {
+      console.log('responsehoges', response.data);
+
+      return {
+        data: response.data,
+      };
+    }),
   );
 };