Reader Profile: Add empty user profile content

client/reader/user-stream/index.tsx

@@ -1,6 +1,8 @@
 import page from '@automattic/calypso-router';
+import { useTranslate } from 'i18n-calypso';
 import { useEffect } from 'react';
 import { connect } from 'react-redux';
+import EmptyContent from 'calypso/components/empty-content';
 import { UserData } from 'calypso/lib/user/user';
 import UserLists from 'calypso/reader/user-stream/views/lists';
 import UserPosts from 'calypso/reader/user-stream/views/posts';
@@ -25,14 +27,29 @@ type UserStreamState = {
 };
 
 export function UserStream( { userId, requestUser, user, streamKey, isLoading }: UserStreamProps ) {
+	const translate = useTranslate();
+
 	useEffect( () => {
 		requestUser( userId );
 	}, [ userId, requestUser ] );
 
-	if ( isLoading || ! user ) {
+	if ( isLoading ) {
 		return <></>;
 	}
 
+	if ( ! user ) {
+		return (
+			<EmptyContent
+				illustration="/calypso/images/illustrations/illustration-404.svg"
+				title={ translate( 'Uh oh. User not found.' ) }
+				line={ translate( 'Sorry, the user you were looking for could not be found.' ) }
+				action={ translate( 'Return to Reader' ) }
+				actionURL="/read"
+				className="user-profile__404"
+			/>
+		);
+	}
+
 	const currentPath = page.current;
 
 	const renderContent = (): React.ReactNode => {

client/reader/user-stream/style.scss

@@ -5,6 +5,12 @@
 		}
 	}
 
+	.user-profile__404.empty-content {
+		max-width: initial;
+		margin: initial;
+		padding-top: initial;
+	}
+
 	div.user-profile__content {
 		main.main.is-user-stream {
 			padding: 0;