Support for joining New Groups via invite links

ts/components/Avatar.tsx

@@ -4,6 +4,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
+import { Spinner } from './Spinner';
+
 import { getInitials } from '../util/getInitials';
 import { LocalizerType } from '../types/Util';
 import { ColorType } from '../types/Colors';
@@ -20,6 +22,7 @@ export enum AvatarSize {
 export type Props = {
   avatarPath?: string;
   color?: ColorType;
+  loading?: boolean;
 
   conversationType: 'group' | 'direct';
   noteToSelf?: boolean;
@@ -136,11 +139,27 @@ export class Avatar extends React.Component<Props, State> {
     );
   }
 
+  public renderLoading(): JSX.Element {
+    const { size } = this.props;
+    const svgSize = size < 40 ? 'small' : 'normal';
+
+    return (
+      <div className="module-avatar__spinner-container">
+        <Spinner
+          size={`${size - 8}px`}
+          svgSize={svgSize}
+          direction="on-avatar"
+        />
+      </div>
+    );
+  }
+
   public render(): JSX.Element {
     const {
       avatarPath,
       color,
       innerRef,
+      loading,
       noteToSelf,
       onClick,
       size,
@@ -156,7 +175,9 @@ export class Avatar extends React.Component<Props, State> {
 
     let contents;
 
-    if (onClick) {
+    if (loading) {
+      contents = this.renderLoading();
+    } else if (onClick) {
       contents = (
         <button
           type="button"