adding upload file progressbar

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -1,5 +1,6 @@
 import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import Dropzone from 'react-dropzone'
+import ProgressBar from '@ramonak/react-progress-bar'
 import type {
   LibraryItem,
   LibraryItemsQueryInput,
@@ -697,7 +698,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     width: '95%',
     height: '80%',
     position: 'absolute',
-    opacity: '0.8',
+    opacity: '0.9',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -903,9 +904,18 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                       color: '$utilityTextDefault',
                       fontWeight: '800',
                       fontSize: '$4',
+                      width:'80%'
                     }}
                   >
-                    Uploading Files...
+                    <ProgressBar
+                      completed={60}
+                      maxCompleted={100}
+                      customLabel="Uploading Files..."
+                      bgColor='rgb(255, 210, 52)'
+                      labelColor='black'
+                      animateOnRender={true}
+                      initCompletedOnAnimation={60}
+                    />
                   </Box>
                 </DragnDropStyle>
               ) : null}

packages/web/package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-popover": "^0.1.1",
     "@radix-ui/react-separator": "^0.1.0",
     "@radix-ui/react-tooltip": "^0.1.7",
+    "@ramonak/react-progress-bar": "^5.0.3",
     "@segment/analytics-next": "^1.33.5",
     "@sentry/nextjs": "^6.16.1",
     "@stitches/react": "^1.2.5",

yarn.lock

@@ -5054,6 +5054,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@ramonak/react-progress-bar@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@ramonak/react-progress-bar/-/react-progress-bar-5.0.3.tgz#a3518fb19e6650e593a208dd429dca7cb6b63d52"
+  integrity sha512-VxXGKN74q94jYoeYuFNJm3xvWhVz9dy+alFZ8S4ZmTTr/05CCq9PjwthT8JB27UdAvn8pHvKBmemV8JU2cZi6A==
+
 "@reach/observe-rect@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"