feat: wait for upload sync (#649)

* feat: add basic progress bar (#605)

* feat: add syncing to share page (#605)

* refactor: use the documentation text comp (#605)

* refactor: move sync logic to new comp (#605)

* refactor: optimize sync check (#605)

* chore: linting (#605)

---------

Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>

src/components/ProgressBar.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react'
+import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+interface Props {
+  linearProgressProps?: LinearProgressProps
+  value: number
+}
+
+export function LinearProgressWithLabel(props: Props): ReactElement {
+  return (
+    <Box display="flex" alignItems="center">
+      <Box width="100%" mr={1}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box minWidth={35}>
+        <Typography variant="body2" color="textSecondary">{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}