Download attachments in separate queue from message processing

This commit is contained in:
Scott Nonnenberg 2019-01-30 12:15:07 -08:00
parent a43a78731a
commit 1d2c3ae23c
34 changed files with 2062 additions and 214 deletions

View file

@ -1,6 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import { Spinner } from '../Spinner';
import { Localizer } from '../../types/Util';
import { AttachmentType } from './types';
@ -59,19 +60,20 @@ export class Image extends React.Component<Props> {
width,
} = this.props;
const { caption } = attachment || { caption: null };
const { caption, pending } = attachment || { caption: null, pending: true };
const canClick = onClick && !pending;
return (
<div
role={onClick ? 'button' : undefined}
role={canClick ? 'button' : undefined}
onClick={() => {
if (onClick) {
if (canClick) {
onClick(attachment);
}
}}
className={classNames(
'module-image',
onClick ? 'module-image__with-click-handler' : null,
canClick ? 'module-image__with-click-handler' : null,
curveBottomLeft ? 'module-image--curved-bottom-left' : null,
curveBottomRight ? 'module-image--curved-bottom-right' : null,
curveTopLeft ? 'module-image--curved-top-left' : null,
@ -80,14 +82,29 @@ export class Image extends React.Component<Props> {
softCorners ? 'module-image--soft-corners' : null
)}
>
<img
onError={onError}
className="module-image__image"
alt={alt}
height={height}
width={width}
src={url}
/>
{pending ? (
<div
className="module-image__loading-placeholder"
style={{
height: `${height}px`,
width: `${width}px`,
lineHeight: `${height}px`,
textAlign: 'center',
}}
// alt={i18n('loading')}
>
<Spinner />
</div>
) : (
<img
onError={onError}
className="module-image__image"
alt={alt}
height={height}
width={width}
src={url}
/>
)}
{caption ? (
<img
className="module-image__caption-icon"
@ -128,7 +145,7 @@ export class Image extends React.Component<Props> {
)}
/>
) : null}
{playIconOverlay ? (
{!pending && playIconOverlay ? (
<div className="module-image__play-overlay__circle">
<div className="module-image__play-overlay__icon" />
</div>