[hotfix] change isLoading to CircularProgress

connect-foundation · Dec 22, 2019 · 836fcc6 · 836fcc6
1 parent fd9da41
commit 836fcc6
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/client/src/components/MusicDetail/index.tsx b/client/src/components/MusicDetail/index.tsx
@@ -8,6 +8,7 @@ import { IMusicContent } from '../MusicDetail/types';
 import { IMusic } from '../UploadMusic/types';
 import { getShortId, getTimeSimple } from '../../utils';
 import Comment from '../Comment';
+import { CircularProgress } from '@material-ui/core';
 
 const MusicDetail: React.FC<MusicDetailProp> = ({
   data,
@@ -62,7 +63,9 @@ const MusicDetail: React.FC<MusicDetailProp> = ({
 
   return (
     isLoading || data === null
-      ? (<div>Loading...</div>)
+      ? (<S.Progress>
+        <CircularProgress color="inherit" />
+      </S.Progress>)
       : (
         <S.Container>
           <S.Header>

diff --git a/client/src/components/MusicDetail/styles.ts b/client/src/components/MusicDetail/styles.ts
@@ -68,3 +68,9 @@ export const CopyRight = styled.div`
     margin: 5rem 0;
     color: ${theme.AMERICAN_RIVER};
 `;
+
+export const Progress = styled.div`
+    margin: auto auto;
+    margin-top: 20px;
+    color: ${theme.BORDER_GRAY};
+`;
diff --git a/client/src/components/WorksDetail/index.tsx b/client/src/components/WorksDetail/index.tsx
@@ -13,6 +13,7 @@ import {
 import { WorksDetailProp } from './types';
 import { UPLOAD } from '../../utils/constants';
 import { RootState } from '../../modules';
+import { CircularProgress } from '@material-ui/core';
 
 const WorksDetail:React.FC<WorksDetailProp> = ({
   data, inputComment, user, isLoading, isError, changeInputHandler, addNewComment,
@@ -69,7 +70,11 @@ const WorksDetail:React.FC<WorksDetailProp> = ({
 
   return (
     isLoading || data === null
-      ? (<div>Loading...</div>)
+      ? (
+      <S.Progress>
+        <CircularProgress color="inherit" />
+      </S.Progress>
+      )
       : (
         <S.Container>
           <S.Title>{data.title}</S.Title>

diff --git a/client/src/components/WorksDetail/styles.ts b/client/src/components/WorksDetail/styles.ts
@@ -139,3 +139,9 @@ export const ImageContent = styled.div<ImageContentProp>`
     background-position: center center;
     margin-top: 1rem;
 `;
+
+export const Progress = styled.div`
+    margin: auto auto;
+    margin-top: 20px;
+    color: ${theme.BORDER_GRAY};
+`;
diff --git a/server/services/feed.ts b/server/services/feed.ts
@@ -8,7 +8,8 @@ const get10Images = (skip, limit) => Image.find()
   .skip(skip)
   .limit(limit)
   .populate('creator', 'name thumbnailUrl')
-  .populate('owner', 'emoji comments views title');
+  .populate('owner', 'emoji comments views title')
+  .sort({ updatedAt: -1 });
 
 const getIdsImages = (id) => Image.find({ creator: id })
   .populate('creator', 'name thumbnailUrl')
@@ -19,7 +20,8 @@ const get10Wallpapers = (skip, limit) => Wallpaper.find()
   .skip(skip)
   .limit(limit)
   .populate('creator', 'name thumbnailUrl')
-  .populate('owner', 'emoji comments views title');
+  .populate('owner', 'emoji comments views title')
+  .sort({ updatedAt: -1 });
 
 const getImageFeeds = (skip, limit) => Image.find()
   .skip(skip)
@@ -31,7 +33,8 @@ const get10Musics = (skip, limit) => Music.find()
   .skip(skip)
   .limit(limit)
   .populate('creator', 'name thumbnailUrl')
-  .populate('owner', 'comments views');
+  .populate('owner', 'comments views')
+  .sort({ updatedAt: -1 });
 
 const getIdsMusics = (id) => Music.find({ creator: id })
   .populate('creator', 'name thumbnailUrl')