Reader: Improve user hovercard performance by using custom implementation

client/blocks/comments/form.jsx

@@ -1,11 +1,12 @@
+import './form.scss';
 import { Button, FormInputValidation } from '@automattic/components';
 import clsx from 'clsx';
 import { localize, useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { connect } from 'react-redux';
+import UserAvatar from 'calypso/blocks/user-avatar';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
-import GravatarWithHovercards from 'calypso/components/gravatar-with-hovercards';
 import { ProtectFormGuard } from 'calypso/lib/protect-form';
 import { recordAction, recordGaEvent, recordTrackForPost, getLocation } from 'calypso/reader/stats';
 import { writeComment, deleteComment, replyComment } from 'calypso/state/comments/actions';
@@ -15,8 +16,6 @@ import { getCurrentRoute } from 'calypso/state/selectors/get-current-route';
 import { getPreviousPath } from 'calypso/state/selectors/get-previous-path';
 import AutoresizingFormTextarea from './autoresizing-form-textarea';
 
-import './form.scss';
-
 const noop = () => {};
 
 function PostCommentFormError( { type } ) {
@@ -149,7 +148,7 @@ class PostCommentForm extends Component {
 	}
 
 	render() {
-		const { post, error, errorType, translate } = this.props;
+		const { post, error, errorType, translate, currentUser } = this.props;
 
 		// Don't display the form if comments are closed
 		if ( post && post.discussion && post.discussion.comments_open === false ) {
@@ -174,7 +173,13 @@ class PostCommentForm extends Component {
 			<form className="comments__form">
 				<ProtectFormGuard isChanged={ this.hasCommentText() } />
 				<FormFieldset>
-					<GravatarWithHovercards user={ this.props.currentUser } />
+					<UserAvatar
+						user={ {
+							avatar_URL: currentUser?.avatar_URL,
+							wpcom_login: currentUser?.username,
+						} }
+						hideHovercard
+					/>
 					<AutoresizingFormTextarea
 						value={ this.getCommentText() }
 						placeholder={ translate( 'Add a comment…' ) }

client/blocks/comments/form.scss

@@ -4,7 +4,7 @@
 	padding: 0 0 0 42px;
 	margin-top: 24px;
 
-	.gravatar {
+	.user-avatar {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -16,7 +16,7 @@
 		padding: 5px 10px;
 	}
 
-	button:not(.components-button) {
+	button:not(.components-button):not(.follow-button) {
 		opacity: 0;
 		position: absolute;
 		margin: 16px 0 0;

client/blocks/comments/post-comment.jsx

@@ -1,15 +1,17 @@
+import './post-comment.scss';
 import config from '@automattic/calypso-config';
 import { getUrlParts } from '@automattic/calypso-url';
 import { Gridicon, TimeSince } from '@automattic/components';
-import { isURL, getProtocol, getAuthority } from '@wordpress/url';
+import { Icon, external } from '@wordpress/icons';
+import { isURL, getAuthority, prependHTTPS } from '@wordpress/url';
 import clsx from 'clsx';
 import { translate } from 'i18n-calypso';
 import { get, some, flatMap } from 'lodash';
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import ConversationCaterpillar from 'calypso/blocks/conversation-caterpillar';
-import GravatarWithHovercards from 'calypso/components/gravatar-with-hovercards';
+import UserAvatar from 'calypso/blocks/user-avatar';
 import { decodeEntities } from 'calypso/lib/formatting';
 import { navigate } from 'calypso/lib/navigate';
 import { createAccountUrl } from 'calypso/lib/paths';
@@ -29,8 +31,6 @@ import PostCommentContent from './post-comment-content';
 import PostCommentWithError from './post-comment-with-error';
 import PostTrackback from './post-trackback';
 
-import './post-comment.scss';
-
 const noop = () => {};
 
 /**
@@ -319,12 +319,10 @@ class PostComment extends PureComponent {
 		} else if ( commentAuthor.site_ID ) {
 			commentAuthorUrl = getStreamUrl( null, commentAuthor.site_ID );
 		} else {
-			const urlToCheck = commentAuthor?.URL;
+			const urlToCheck = prependHTTPS( commentAuthor?.URL );
 			if ( urlToCheck && isURL( urlToCheck ) ) {
-				const protocol = getProtocol( urlToCheck );
 				const domain = getAuthority( urlToCheck );
-				// isURL uses URL() which allows '%20' in Chromium but not Firefox, so we check ourselves.
-				if ( protocol === 'https:' && ! domain.includes( '%' ) ) {
+				if ( ! domain.includes( '%' ) ) {
 					commentAuthorUrl = urlToCheck;
 				}
 			}
@@ -334,7 +332,9 @@ class PostComment extends PureComponent {
 	};
 
 	renderAuthorTag = ( { authorName, authorUrl, commentId, className } ) => {
-		return authorUrl ? (
+		const isExternalUrl = authorUrl?.startsWith( '/reader/users/' ) === false;
+
+		return authorUrl && ! isExternalUrl ? (
 			<a
 				href={ authorUrl }
 				className={ className }
@@ -346,6 +346,17 @@ class PostComment extends PureComponent {
 		) : (
 			<strong className={ className } id={ `comment-${ commentId }` }>
 				{ authorName }
+
+				{ isExternalUrl && (
+					<a
+						className="comments__external-link"
+						href={ authorUrl }
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<Icon icon={ external } size={ 18 } />
+					</a>
+				) }
 			</strong>
 		);
 	};
@@ -446,13 +457,7 @@ class PostComment extends PureComponent {
 		return (
 			<li className={ postCommentClassnames }>
 				<div className="comments__comment-author">
-					{ commentAuthorUrl ? (
-						<a href={ commentAuthorUrl } onClick={ this.handleAuthorClick } tabIndex={ -1 }>
-							<GravatarWithHovercards user={ comment.author } />
-						</a>
-					) : (
-						<GravatarWithHovercards user={ comment.author } />
-					) }
+					<UserAvatar user={ comment.author } />
 
 					{ this.renderAuthorTag( {
 						authorUrl: commentAuthorUrl,

client/blocks/comments/post-comment.scss

@@ -8,7 +8,7 @@
 	&.depth-2 {
 		padding-left: 42px;
 
-		> .comments__comment-author .gravatar {
+		> .comments__comment-author .user-avatar {
 			left: 0;
 		}
 	}
@@ -68,10 +68,9 @@
 	font-size: $font-body-small;
 	font-weight: 600;
 
-	.gravatar {
-		border-radius: 48px; /* stylelint-disable-line scales/radii */
+	.user-avatar {
 		position: absolute;
-		top: 8px;
+		top: 4px;
 		left: -41px;
 	}
 }
@@ -95,6 +94,16 @@ a.comments__comment-username {
 	}
 }
 
+.comments__external-link {
+	margin-left: 2px;
+	position: relative;
+	top: 3px;
+
+	svg {
+		fill: var(--color-link);
+	}
+}
+
 .comments__comment-trackbackicon {
 	background-color: var(--color-neutral-0);
 	border-radius: 50%;

client/blocks/comments/post-trackback.tsx

@@ -33,7 +33,6 @@ export default function PostTrackback( props: PostTrackbackProps ): JSX.Element
 		return null;
 	}
 	const unescapedAuthorName = unescape( get( comment, 'author.name', '' ) );
-
 	const authorUrlLink = comment.author?.wpcom_login
 		? getUserProfileUrl( comment.author.wpcom_login )
 		: comment.author?.URL;

client/blocks/reader-full-post/header-meta.jsx

@@ -17,11 +17,7 @@ const ReaderFullPostHeaderMeta = ( { post, author, siteName, feedId, siteId } )
 
 	return (
 		<div className="reader-full-post__header-meta-wrapper">
-			<UserAvatar
-				className="reader-full-post__header-meta-avatars"
-				user={ author }
-				iconSize={ 40 }
-			/>
+			<UserAvatar user={ author } size={ 40 } />
 			<div className="reader-full-post__header-meta-info">
 				<div className="reader-full-post__header-meta-line-1">
 					{ showAuthorLink && (

client/blocks/reader-full-post/style.scss

@@ -99,20 +99,6 @@ $reader-full-post-desktop-min: $reader-full-post-sidebar-width + $reader-full-po
 	}
 }
 
-.reader-full-post__header-meta-avatars {
-	flex-shrink: 0;
-
-	.gravatar {
-		border-radius: 50%;
-		width: 40px;
-		height: 40px;
-	}
-
-	.gridicons-globe {
-		fill: var( --color-neutral-70 );
-	}
-}
-
 .reader-full-post__header-meta-info {
 	flex: 1;
 	min-width: 0;

client/blocks/reader-subscription-list-item/placeholder.jsx → client/blocks/reader-subscription-list-item/placeholder.tsx

@@ -1,25 +1,29 @@
-import UserAvatar from 'calypso/blocks/user-avatar';
+import { useTranslate } from 'i18n-calypso';
+
+const ReaderSubscriptionListItemPlaceholder = (): JSX.Element => {
+	const translate = useTranslate();
 
-const ReaderSubscriptionListItemPlaceholder = () => {
 	return (
 		<div className="reader-subscription-list-item reader-subscription-list-item__placeholder">
 			<div>
-				<UserAvatar isCompact iconSize={ 32 } />
+				<span className="reader-subscription-list-item__site-avatar is-placeholder"></span>
 			</div>
 			<div className="reader-subscription-list-item__byline">
-				<span className="reader-subscription-list-item__site-title is-placeholder">Site title</span>
+				<span className="reader-subscription-list-item__site-title is-placeholder">
+					{ translate( 'Site title' ) }
+				</span>
 				<div className="reader-subscription-list-item__site-excerpt is-placeholder">
-					Description of the site
+					{ translate( 'The description of the site.' ) }
 				</div>
 				<span className="reader-subscription-list-item__by-text is-placeholder">
-					by author name
+					{ translate( 'Author name' ) }
 				</span>
 				<span className="reader-subscription-list-item__site-url is-placeholder">
 					www.example.com
 				</span>
 			</div>
 			<div className="reader-subscription-list-item__options">
-				<div className="reader-subscription-list-item__follow">Follow here</div>
+				<div className="reader-subscription-list-item__follow">{ translate( 'Follow here' ) }</div>
 			</div>
 		</div>
 	);

client/blocks/reader-subscription-list-item/style.scss

@@ -24,13 +24,6 @@
 	-webkit-box-orient: vertical;
 }
 
-.reader-subscription-list-item .gravatar {
-	float: left;
-	height: 32px;
-	min-height: 32px;
-	min-width: 32px;
-}
-
 .reader-subscription-list-item .site-icon {
 	margin-top: 4px;
 }
@@ -182,6 +175,7 @@
 
 // Placeholders
 .reader-subscription-list-item.reader-subscription-list-item__placeholder {
+	.reader-subscription-list-item__site-avatar,
 	.reader-subscription-list-item__site-title,
 	.reader-subscription-list-item__site-excerpt,
 	.reader-subscription-list-item__by-text,
@@ -195,6 +189,13 @@
 		max-width: 80%;
 	}
 
+	.reader-subscription-list-item__site-avatar {
+		border-radius: 4px;
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+	}
+
 	.reader-subscription-list-item__site-title {
 		max-width: 60%;
 	}

client/blocks/reader-suggested-follows/dialog.jsx

@@ -165,7 +165,7 @@ const ReaderSuggestedFollowsDialog = ( {
 										<ReaderSitesList
 											sites={ data }
 											followSource="reader-recommended-follows-dialog__recommended-feeds-list"
-											iconSize={ 48 }
+											siteIconSize={ 48 }
 										/>
 									</li>
 								) }

client/blocks/reader-suggested-follows/style.scss

@@ -20,7 +20,6 @@
 	padding: 0 32px 10px 32px;
 }
 
-;
 .reader-recommended-follows-dialog__body {
 	scrollbar-width: thin;
 	scrollbar-gutter: stable;
@@ -171,8 +170,9 @@
 
 		.is-placeholder.placeholder-title {
 			width: 50%;
-			height: 48
+			height: 48px;
 		}
+
 		.is-placeholder.placeholder-description {
 			height: 24px;
 		}

client/blocks/user-avatar/docs/example.tsx

@@ -10,8 +10,6 @@ const UserAvatarExample = (): JSX.Element => {
 	return (
 		<div className="design-assets__group">
 			<UserAvatar user={ user } />
-			<h4>Compact</h4>
-			<UserAvatar user={ user } isCompact />
 		</div>
 	);
 };