[Feature] Apply the content loader to the main page and introcue page

package.json

@@ -36,6 +36,7 @@
     "moment-timezone": "^0.5.32",
     "qs": "^6.9.4",
     "react": "^17.0.1",
+    "react-content-loader": "^5.1.4",
     "react-dom": "^17.0.1",
     "react-draft-wysiwyg": "^1.14.5",
     "react-moment": "^1.0.0",

src/components/introduce/GroupsContentLoader.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+
+import ContentLoader from 'react-content-loader';
+
+const GroupContentLoader = (props) => (
+  <ContentLoader
+    speed={1}
+    viewBox="0 0 1024 900"
+    height={900}
+    width={1024}
+    backgroundColor="#f2f2f2"
+    foregroundColor="#e3e3e3"
+    {...props}
+  >
+    <rect x="0" y="100" rx="8" ry="8" width="300" height="50" />
+    <rect x="820" y="100" rx="8" ry="8" width="200" height="42" />
+    <rect x="0" y="175" rx="8" ry="8" width="1024" height="5" />
+
+    <rect x="0" y="260" rx="8" ry="8" width="1024" height="80" />
+    <rect x="0" y="410" rx="8" ry="8" width="260" height="5" />
+
+    <rect x="0" y="470" rx="8" ry="8" width="1024" height="250" />
+
+    <rect x="0" y="760" rx="8" ry="8" width="100" height="40" />
+    <rect x="120" y="760" rx="8" ry="8" width="100" height="40" />
+
+  </ContentLoader>
+);
+
+export default GroupContentLoader;

src/components/main/GroupsContentLoader.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+
+import ContentLoader from 'react-content-loader';
+
+const GroupsContentLoader = (props) => (
+  <ContentLoader
+    speed={1}
+    viewBox="0 0 1024 900"
+    height={900}
+    width={1024}
+    backgroundColor="#f2f2f2"
+    foregroundColor="#e3e3e3"
+    {...props}
+  >
+    <rect x="5" y="20" rx="8" ry="8" width="220" height="40" />
+    <rect x="850" y="20" rx="8" ry="8" width="150" height="40" />
+
+    <rect x="18" y="130" rx="8" ry="8" width="304" height="310" />
+    <rect x="350" y="130" rx="8" ry="8" width="304" height="310" />
+    <rect x="680" y="130" rx="8" ry="8" width="304" height="310" />
+
+    <rect x="18" y="470" rx="8" ry="8" width="304" height="310" />
+    <rect x="350" y="470" rx="8" ry="8" width="304" height="310" />
+    <rect x="680" y="470" rx="8" ry="8" width="304" height="310" />
+
+  </ContentLoader>
+);
+
+export default GroupsContentLoader;

src/components/main/StudyGroups.jsx

@@ -30,7 +30,7 @@ const StudyGroups = ({ groups, realTime, user }) => (
       )}
     </TitleHeader>
     <StudyGroupsWrapper>
-      {groups.map((group) => (
+      {groups && groups.map((group) => (
         <StudyGroup
           key={group.id}
           group={group}

src/containers/groups/StudyGroupsContainer.jsx

@@ -10,10 +10,12 @@ import { getAuth, getGroup } from '../../util/utils';
 import { loadStudyGroups } from '../../reducers/groupSlice';
 
 import StudyGroups from '../../components/main/StudyGroups';
+import GroupsContentLoader from '../../components/main/GroupsContentLoader';
 
 const StudyGroupsContainer = () => {
   const { search } = useLocation();
   const [realTime, setRealTime] = useState(Date.now());
+  const [tagState, setTagState] = useState(null);
 
   const dispatch = useDispatch();
 
@@ -29,11 +31,14 @@ const StudyGroupsContainer = () => {
       ignoreQueryPrefix: true,
     });
 
+    setTagState(tag);
     dispatch(loadStudyGroups(tag));
   }, [dispatch, search]);
 
-  if (!groups || !groups.length) {
-    return <div>스터디가 존재하지 않습니다.</div>;
+  if (!tagState && (!groups || !groups.length)) {
+    return (
+      <GroupsContentLoader />
+    );
   }
 
   return (

src/containers/groups/StudyGroupsContainer.test.jsx

@@ -60,7 +60,7 @@ describe('StudyGroupsContainer', () => {
     it('nothing group list text message', () => {
       const { container } = renderStudyGroupsContainer();
 
-      expect(container).toHaveTextContent('스터디가 존재하지 않습니다.');
+      expect(container).toHaveTextContent('Loading...');
     });
   });
 });

src/containers/introduce/IntroduceContainer.jsx

@@ -7,6 +7,7 @@ import { getAuth, getGroup } from '../../util/utils';
 import { loadStudyGroup, updateStudyGroup } from '../../reducers/groupSlice';
 
 import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm';
+import GroupContentLoader from '../../components/introduce/GroupsContentLoader';
 
 const IntroduceContainer = ({ groupId }) => {
   const [realTime, setRealTime] = useState(Date.now());
@@ -32,7 +33,7 @@ const IntroduceContainer = ({ groupId }) => {
 
   if (!group) {
     return (
-      <div>로딩중..</div>
+      <GroupContentLoader />
     );
   }
 

src/containers/introduce/IntroduceContainer.test.jsx

@@ -69,7 +69,7 @@ describe('IntroduceContainer', () => {
     it('renders "loading.." text', () => {
       const { container } = renderIntroduceContainer(1);
 
-      expect(container).toHaveTextContent('로딩중..');
+      expect(container).toHaveTextContent('Loading...');
     });
   });
 

src/reducers/groupSlice.js

@@ -81,6 +81,10 @@ export const {
 } = actions;
 
 export const loadStudyGroups = (tag) => async (dispatch) => {
+  if (tag) {
+    dispatch(setStudyGroups(null));
+  }
+
   const groups = await getStudyGroups(tag);
 
   dispatch(setStudyGroups(groups));

src/reducers/groupSlice.test.js

@@ -137,12 +137,25 @@ describe('async actions', () => {
       store = mockStore({});
     });
 
-    it('loads study group list', async () => {
-      await store.dispatch(loadStudyGroups());
+    context('with tag', () => {
+      it('loads study group list', async () => {
+        await store.dispatch(loadStudyGroups('javascript'));
 
-      const actions = store.getActions();
+        const actions = store.getActions();
+
+        expect(actions[0]).toEqual(setStudyGroups(null));
+        expect(actions[1]).toEqual(setStudyGroups([]));
+      });
+    });
 
-      expect(actions[0]).toEqual(setStudyGroups([]));
+    context('without tag', () => {
+      it('loads study group list', async () => {
+        await store.dispatch(loadStudyGroups());
+
+        const actions = store.getActions();
+
+        expect(actions[0]).toEqual(setStudyGroups([]));
+      });
     });
   });