loaders added

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -7,6 +7,7 @@ import ptt from 'parse-torrent-title'
 import axios from 'axios'
 import { playlistTorrHost, streamHost, torrentsHost, viewedHost } from 'utils/Hosts'
 import { GETTING_INFO, IN_DB } from 'torrentStates'
+import CircularProgress from '@material-ui/core/CircularProgress'
 
 import { useUpdateCache, useCreateCacheMap, useGetSettings } from './customHooks'
 import DialogHeader from './DialogHeader'
@@ -115,8 +116,11 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
         {...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
       />
 
+      <div style={{ minHeight: '80vh' }}>
         {isLoading ? (
-        'loading'
+          <div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
+            <CircularProgress />
+          </div>
         ) : isDetailedCacheView ? (
           <DetailedTorrentCacheViewWrapper>
             <div>
@@ -306,6 +310,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
             </TorrentFilesSection>
           </DialogContentGrid>
         )}
+      </div>
     </>
   )
 }

web/src/components/DialogTorrentDetailsContent/style.js

@@ -92,7 +92,6 @@ export const SectionHeader = styled.div`
 
 export const DetailedTorrentCacheViewWrapper = styled.div`
   overflow: auto;
-  min-height: 80vh;
   padding: 40px;
   > :not(:last-child) {
     padding-bottom: 50px;

web/src/components/TorrentList.jsx

@@ -4,6 +4,7 @@ import { Typography } from '@material-ui/core'
 import { torrentsHost } from 'utils/Hosts'
 import TorrentCard from 'components/TorrentCard'
 import axios from 'axios'
+import CircularProgress from '@material-ui/core/CircularProgress'
 
 const TorrentListWrapper = styled.div`
   display: grid;
@@ -20,9 +21,16 @@ const TorrentListWrapper = styled.div`
   }
 `
 
+const CenteredGrid = styled.div`
+  height: 75vh;
+  display: grid;
+  place-items: center;
+`
+
 export default function TorrentList() {
   const [torrents, setTorrents] = useState([])
-  const [offline, setOffline] = useState(true)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isOffline, setIsOffline] = useState(true)
   const timerID = useRef(-1)
 
   useEffect(() => {
@@ -33,27 +41,34 @@ export default function TorrentList() {
         .then(({ data }) => {
           // updating torrent list
           setTorrents(data)
-          setOffline(false)
+          setIsOffline(false)
         })
         .catch(() => {
           // resetting torrent list
           setTorrents([])
-          setOffline(true)
+          setIsOffline(true)
         })
+        .finally(() => setIsLoading(false))
     }, 1000)
 
     return () => clearInterval(timerID.current)
   }, [])
 
-  return (
+  return isLoading ? (
-    <TorrentListWrapper>
+    <CenteredGrid>
-      {offline ? (
+      <CircularProgress />
+    </CenteredGrid>
+  ) : isOffline ? (
+    <CenteredGrid>
       <Typography>Offline</Typography>
+    </CenteredGrid>
   ) : !torrents.length ? (
     <Typography>No torrents added</Typography>
   ) : (
-        torrents.map(torrent => <TorrentCard key={torrent.hash} torrent={torrent} />)
+    <TorrentListWrapper>
-      )}
+      {torrents.map(torrent => (
+        <TorrentCard key={torrent.hash} torrent={torrent} />
+      ))}
     </TorrentListWrapper>
   )
 }