Added lazy-loading of admin auth in Comments UI (#19799)

closes ENG-711

When an Admin is authenticated in Comments-UI we only add moderation options to the displayed comments so we don't need to pre-emptively load the `admin-auth` iframe and make the `/ghost/api/admin/users/me/` request until some comments are actually visible.

- used `state.comments.length` property to defer rendering of the admin auth frame until comments have been fetched (after box is scrolled into view) and the count is > 0

apps/comments-ui/src/App.tsx

@@ -192,7 +192,7 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
             <CommentsFrame ref={iframeRef}>
                 <ContentBox done={done} />
             </CommentsFrame>
-            <AuthFrame adminUrl={options.adminUrl} onLoad={initAdminAuth}/>
+            {state.comments.length > 0 ? <AuthFrame adminUrl={options.adminUrl} onLoad={initAdminAuth}/> : null}
             <PopupBox />
         </AppContext.Provider>
     );

apps/comments-ui/test/e2e/auth-frame.test.ts

@@ -4,7 +4,7 @@ import {expect, test} from '@playwright/test';
 const admin = MOCKED_SITE_URL + '/ghost/';
 
 test.describe('Auth Frame', async () => {
-    test('renders the auth frame', async ({page}) => {
+    test('skips rendering the auth frame with no comments', async ({page}) => {
         const mockedApi = new MockedApi({});
         await initialize({
             mockedApi,
@@ -13,6 +13,23 @@ test.describe('Auth Frame', async () => {
             admin
         });
 
+        const iframeElement = await page.locator('iframe[data-frame="admin-auth"]');
+        await expect(iframeElement).toHaveCount(0);
+    });
+
+    test('renders the auth frame when there are comments', async ({page}) => {
+        const mockedApi = new MockedApi({});
+        mockedApi.addComment({
+            html: '<p>This is comment 1</p>'
+        });
+
+        await initialize({
+            mockedApi,
+            page,
+            publication: 'Publisher Weekly',
+            admin
+        });
+
         const iframeElement = await page.locator('iframe[data-frame="admin-auth"]');
         await expect(iframeElement).toHaveCount(1);
     });
@@ -45,7 +62,7 @@ test.describe('Auth Frame', async () => {
         const iframeElement = await page.locator('iframe[data-frame="admin-auth"]');
         await expect(iframeElement).toHaveCount(1);
 
-        const comments =  await frame.getByTestId('comment-component');
+        const comments = await frame.getByTestId('comment-component');
         await expect(comments).toHaveCount(5);
 
         const moreButtons = await frame.getByTestId('more-button');
@@ -86,7 +103,7 @@ test.describe('Auth Frame', async () => {
         await expect(iframeElement).toHaveCount(1);
 
         // Check if more actions button is visible on each comment
-        const comments =  await frame.getByTestId('comment-component');
+        const comments = await frame.getByTestId('comment-component');
         await expect(comments).toHaveCount(5);
 
         const moreButtons = await frame.getByTestId('more-button');
@@ -143,7 +160,7 @@ test.describe('Auth Frame', async () => {
         await expect(iframeElement).toHaveCount(1);
 
         // Check if more actions button is visible on each comment
-        const comments =  await frame.getByTestId('comment-component');
+        const comments = await frame.getByTestId('comment-component');
         await expect(comments).toHaveCount(5);
 
         const moreButtons = await frame.getByTestId('more-button');

apps/comments-ui/test/e2e/lazy-loading.test.ts

@@ -48,18 +48,23 @@ test.describe('Lazy loading', async () => {
         await page.locator('iframe[title="comments-frame"]').waitFor({state: 'attached'});
 
         const commentsFrameSelector = 'iframe[title="comments-frame"]';
+        const adminFrameSelector = 'iframe[data-frame="admin-auth"]';
 
-        const frame = page.frameLocator(commentsFrameSelector);
+        const commentsFrame = page.frameLocator(commentsFrameSelector);
 
         // wait for a little bit to ensure we're not loading comments until scrolled
         await page.waitForTimeout(250);
 
-        // check that we haven't loaded comments yet
+        // check that we haven't loaded comments or admin-auth yet
-        await expect(frame.getByTestId('loading')).toHaveCount(1);
+        await expect(commentsFrame.getByTestId('loading')).toHaveCount(1);
+        await expect(page.locator(adminFrameSelector)).toHaveCount(0);
 
+        // scroll the iframe into view
         const iframeHandle = await page.locator(commentsFrameSelector);
         iframeHandle.scrollIntoViewIfNeeded();
 
-        await expect(frame.getByTestId('loading')).toHaveCount(0);
+        // loading state should be gone and admin-auth frame should be present
+        await expect(commentsFrame.getByTestId('loading')).toHaveCount(0);
+        await expect(page.locator(adminFrameSelector)).toHaveCount(1);
     });
 });