Update user profile UI: move loading and error to center

frontend/app/components/profile/profile.module.css

@@ -67,6 +67,12 @@
   padding: 0 16px 16px;
 }
 
+.errorContent {
+  align-self: center;
+  text-align: center;
+  margin: auto;
+}
+
 .error {
   font-size: 14px;
   margin: 0 0 4px;
@@ -168,7 +174,7 @@
 }
 
 .preloader {
-  margin: 0 auto;
+  margin: auto;
   color: var(--color13);
 }
 

frontend/app/components/profile/profile.spec.tsx

@@ -61,7 +61,7 @@ describe('<Profile />', () => {
     expect(queryByRole('heading', { name: /recent comments/i })).not.toBeInTheDocument();
   });
 
-  it('should render without comments', async () => {
+  it('should render user without comments', async () => {
     jest.spyOn(pq, 'parseQuery').mockImplementation(() => ({ ...userParamsStub }));
     const getUserComments = jest.spyOn(api, 'getUserComments').mockImplementation(async () => ({ comments: [] }));
 

frontend/app/components/profile/profile.tsx

@@ -173,14 +173,14 @@ export function Profile() {
         </header>
         <section className={clsx('profile-content', styles.content)}>
           {error && (
-            <>
+            <div className={styles.errorContent}>
               <p className={clsx('profile-error', styles.error)}>
                 <FormattedMessage id="errors.0" defaultMessage="Something went wrong. Please try again a bit later." />
               </p>
               <Button kind="link" size="sm" onClick={handleClickRetryCommentsRequest}>
                 <FormattedMessage id="retry" defaultMessage="Retry" />
               </Button>
-            </>
+            </div>
           )}
           {isCommentsLoading && <Preloader className={styles.preloader} />}
           {comments !== null && commentsJSX}