Merge pull request #141 from codecentric/loading-merge-requests-screen

implement loading screen

Author: Matthias Rütten

src/renderer/components/merge-requests/Alerts.tsx

@@ -3,19 +3,32 @@ import { Box, Heading, Text } from 'rebass'
 
 import DoneAllIcon from '@material-ui/icons/DoneAll'
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'
 
 export const NoMergeRequests: React.FunctionComponent = () => (
-    <Box p={3}>
+    <Box p={3} style={{ textAlign: 'center' }}>
         <Text my={2} fontSize={4}>
-            <DoneAllIcon color='action' /> There are no open merge requests
+            <DoneAllIcon style={{ fontSize: '72px' }} color='action' fontSize='inherit' />
+            <Heading my={2} fontSize={3}>
+                There are no open merge requests
+            </Heading>
         </Text>
     </Box>
 )
 
+export const LoadingMergeRequests: React.FunctionComponent = () => (
+    <Box p={3} style={{ textAlign: 'center' }}>
+        <CloudDownloadOutlinedIcon style={{ fontSize: '72px' }} color='action' fontSize='inherit' />
+        <Heading my={2} fontSize={3}>
+            Loading your merge requests
+        </Heading>
+    </Box>
+)
+
 export const CouldNotLoadMergeRequests: React.FunctionComponent = () => (
     <Box p={3} style={{ textAlign: 'center' }}>
         <ErrorOutlineIcon style={{ fontSize: '72px' }} color='error' fontSize='inherit' />
-        <Heading my={2} fontSize={4}>
+        <Heading my={2} fontSize={3}>
             Something went wrong
         </Heading>
         <Text>Could not load your merge requests</Text>

src/renderer/components/merge-requests/MergeRequestsPage.tsx

@@ -4,10 +4,10 @@ import { shell } from 'electron'
 
 import { MergeRequestGroup } from './list/MergeRequestGroup'
 import { MergeRequestItem } from './list/MergeRequestItem'
+import { CouldNotLoadMergeRequests, LoadingMergeRequests, NoMergeRequests } from './Alerts'
 
 import { useBackend } from '../../hooks/merge-requests/backend'
 import { MergeRequest } from '../../hooks/merge-requests/types'
-import * as Alerts from './Alerts'
 
 const openMergeRequest = (url: string) => (event: React.MouseEvent) => {
     event.preventDefault()
@@ -38,12 +38,15 @@ const renderMergeRequest = (mergeRequest: MergeRequest) => {
 }
 
 export const MergeRequestsPage: React.FunctionComponent = () => {
-    const { groupedMergeRequests } = useBackend()
+    const { groupedMergeRequests, isLoading } = useBackend()
+    if (isLoading && !groupedMergeRequests) {
+        return <LoadingMergeRequests />
+    }
     if (!groupedMergeRequests) {
-        return <Alerts.CouldNotLoadMergeRequests />
+        return <CouldNotLoadMergeRequests />
     }
     if (groupedMergeRequests.length === 0) {
-        return <Alerts.NoMergeRequests />
+        return <NoMergeRequests />
     }
 
     return (

src/renderer/hooks/merge-requests/backend.tsx

@@ -28,7 +28,6 @@ export const BackendProvider = ({ ...props }) => {
     const { config } = useConfig()
     const [groupedMergeRequests, setGroupedMergeRequests] = React.useState<GroupedMergeRequest[] | undefined>(undefined)
     const [mergeRequestWithProjects, setMergeRequestWithProjects] = React.useState<MergeRequestWithProject[] | undefined>(undefined)
-    const [loadErrors, setLoadErrors] = React.useState<number>(0)
     const [isLoading, setIsLoading] = React.useState<boolean>(false)
 
     const updateData = async (newConfig?: Config) => {
@@ -39,18 +38,12 @@ export const BackendProvider = ({ ...props }) => {
                 const data = await loadData(configToUse.connectionConfig)
                 setGroupedMergeRequests(data.groupedMergeRequests)
                 setMergeRequestWithProjects(data.mergeRequestWithProjects)
-                setLoadErrors(0)
 
                 const numberOfOpenMergeRequest = data.mergeRequestWithProjects.reduce((total, entry) => total + (entry.work_in_progress ? 0 : 1), 0)
                 ipcRenderer.send('update-open-merge-requests', numberOfOpenMergeRequest)
             }
         } catch (error) {
             log.error('Could not load the merge requests', error)
-            setLoadErrors(loadErrors + 1)
-            if (loadErrors > 2) {
-                setGroupedMergeRequests(undefined)
-                setMergeRequestWithProjects(undefined)
-            }
         } finally {
             setIsLoading(false)
         }