Refactor ProgressBar

app/soapbox/components/ui/progress-bar/progress-bar.tsx

@@ -1,13 +1,32 @@
+import clsx from 'clsx';
 import React from 'react';
+import { spring } from 'react-motion';
+
+import Motion from 'soapbox/features/ui/util/optional-motion';
 
 interface IProgressBar {
-  progress: number,
+  /** Number between 0 and 1 to represent the percentage complete. */
+  progress: number
+  /** Height of the progress bar. */
+  size?: 'sm' | 'md'
 }
 
 /** A horizontal meter filled to the given percentage. */
-const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
-  <div className='h-2.5 w-full rounded-full bg-gray-300 dark:bg-primary-800 overflow-hidden'>
-    <div className='h-full bg-secondary-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
+const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => (
+  <div
+    className={clsx('h-2.5 w-full rounded-lg bg-gray-300 dark:bg-primary-800 overflow-hidden', {
+      'h-2.5': size === 'md',
+      'h-[6px]': size === 'sm',
+    })}
+  >
+    <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress * 100) }}>
+      {({ width }) => (
+        <div
+          className='h-full bg-secondary-500'
+          style={{ width: `${width}%` }}
+        />
+      )}
+    </Motion>
   </div>
 );
 

app/soapbox/components/upload-progress.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { spring } from 'react-motion';
 
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import Motion from 'soapbox/features/ui/util/optional-motion';
+import { HStack, Icon, ProgressBar, Stack, Text } from 'soapbox/components/ui';
 
 interface IUploadProgress {
-  /** Number between 0 and 1 to represent the percentage complete. */
-  progress: number,
+  /** Number between 0 and 100 to represent the percentage complete. */
+  progress: number
 }
 
 /** Displays a progress bar for uploading files. */
@@ -24,16 +22,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
           <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
         </Text>
 
-        <div className='w-full h-1.5 rounded-lg bg-gray-200 relative'>
-          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
-            {({ width }) =>
-              (<div
-                className='absolute left-0 top-0 h-1.5 bg-primary-600 rounded-lg'
-                style={{ width: `${width}%` }}
-              />)
-            }
-          </Motion>
-        </div>
+        <ProgressBar progress={progress / 100} size='sm' />
       </Stack>
     </HStack>
   );

app/soapbox/features/chats/components/chat-pending-upload.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { ProgressBar } from 'soapbox/components/ui';
+
+interface IChatPendingUpload {
+  progress: number
+}
+
+/** Displays a loading thumbnail for an upload in the chat composer. */
+const ChatPendingUpload: React.FC<IChatPendingUpload> = ({ progress }) => {
+  return (
+    <div className='relative p-4 inline-flex items-center justify-center w-24 h-24 rounded-lg overflow-hidden isolate bg-gray-200 dark:bg-primary-900'>
+      <ProgressBar progress={progress} size='sm' />
+    </div>
+  );
+};
+
+export default ChatPendingUpload;

app/soapbox/features/chats/components/chat-textarea.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { ProgressBar, Textarea } from 'soapbox/components/ui';
+import { Textarea } from 'soapbox/components/ui';
 import { Attachment } from 'soapbox/types/entities';
 
+import ChatPendingUpload from './chat-pending-upload';
 import ChatUpload from './chat-upload';
 
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
@@ -36,9 +37,7 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
       {(!!attachments?.length || isUploading) && (
         <div className='p-3 pb-0'>
           {isUploading && (
-            <div className='relative p-4 inline-flex items-center justify-center w-24 h-24 rounded-lg overflow-hidden isolate bg-gray-200 dark:bg-primary-900'>
-              <ProgressBar progress={uploadProgress} />
-            </div>
+            <ChatPendingUpload progress={uploadProgress} />
           )}
 
           {attachments?.map(attachment => (