Merge remote-tracking branch 'origin/develop' into hoverstatus

app/soapbox/components/autosuggest_account_input.tsx

@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 
 import { accountSearch } from 'soapbox/actions/accounts';

app/soapbox/components/filter_bar.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';

app/soapbox/components/hover_ref_wrapper.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -15,7 +15,7 @@ const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
 
 interface IHoverRefWrapper {
   accountId: string,
-  inline: boolean,
+  inline?: boolean,
   className?: string,
 }
 

app/soapbox/components/scroll-top-button.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
 

app/soapbox/components/scrollable_list.tsx

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { useEffect, useRef, useMemo, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso';

app/soapbox/components/status_list.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 

app/soapbox/components/sub_navigation.js

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { injectIntl, defineMessages } from 'react-intl';

app/soapbox/components/upload-progress.tsx

@@ -0,0 +1,42 @@
+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';
+
+interface IUploadProgress {
+  /** Number between 0 and 1 to represent the percentage complete. */
+  progress: number,
+}
+
+/** Displays a progress bar for uploading files. */
+const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
+  return (
+    <HStack alignItems='center' space={2}>
+      <Icon
+        src={require('@tabler/icons/icons/cloud-upload.svg')}
+        className='w-7 h-7 text-gray-500'
+      />
+
+      <Stack space={1}>
+        <Text theme='muted'>
+          <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>
+      </Stack>
+    </HStack>
+  );
+};
+
+export default UploadProgress;