render text prior to signature verification

extension/chrome/elements/pgp_block_modules/pgp-block-render-module.ts

@@ -79,7 +79,6 @@ export class PgpBlockViewRenderModule {
   public decideDecryptedContentFormattingAndRender = async (decryptedBytes: Buf, isEncrypted: boolean, sigResult: VerifyRes | undefined,
     verificationPubs: string[], retryVerification: (verificationPubs: string[]) => Promise<VerifyRes | undefined>, plainSubject?: string) => {
     this.setFrameColor(isEncrypted ? 'green' : 'gray');
-    await this.view.signatureModule.renderPgpSignatureCheckResult(sigResult, verificationPubs, retryVerification);
     const publicKeys: string[] = [];
     let renderableAttachments: Attachment[] = [];
     let decryptedContent = decryptedBytes.toUtfStr();
@@ -120,6 +119,7 @@ export class PgpBlockViewRenderModule {
     if (Str.mostlyRTL(Xss.htmlSanitizeAndStripAllTags(decryptedContent, '\n'))) {
       $('#pgp_signature').addClass('rtl');
     }
+    await this.view.signatureModule.renderPgpSignatureCheckResult(sigResult, verificationPubs, retryVerification);
     if (isEncrypted && publicKeys.length) {
       BrowserMsg.send.renderPublicKeys(this.view.parentTabId, { afterFrameId: this.view.frameId, publicKeys });
     }

extension/chrome/elements/pgp_block_modules/pgp-block-signature-module.ts

@@ -43,7 +43,7 @@ export class PgpBlockViewSignatureModule {
           // in some tests we load the block without sender information
           $('#pgp_signature').addClass('bad').find('.result').text(`Cannot verify: missing pubkey, missing sender info`);
         } else {
-          this.view.renderModule.renderText('Verifying message...');
+          $('#pgp_signature > .result').text('Verifying message...');
           try {
             const { pubkeys } = await this.view.pubLookup.lookupEmail(signerEmail);
             if (pubkeys.length) {

test/source/mock/attester/attester-endpoints.ts

@@ -9,6 +9,7 @@ import { expect } from 'chai';
 import { GoogleData } from '../google/google-data';
 import { Buf } from '../../core/buf';
 import { testConstants } from '../../tests/tooling/consts';
+import { Util } from '../../util';
 
 // tslint:disable:no-blank-lines-func
 
@@ -59,6 +60,10 @@ export const mockAttesterEndpoints: HandlersDefinition = {
       if (emailOrLongid === 'some.sender@test.com') {
         return await get203FAE7076005381();
       }
+      if (emailOrLongid === 'this.pubkey.takes.long.time.to.load@sender.test') {
+        await Util.sleep(5);
+        return await get203FAE7076005381();
+      }
       if (['sams50sams50sept@gmail.com', 'sender@example.com'].includes(emailOrLongid)) {
         return testConstants.pubkey2864E326A5BE488A;
       }

test/source/tests/decrypt.ts

@@ -440,6 +440,18 @@ XZ8r4OC6sguP/yozWlkG+7dDxsgKQVBENeG6Lw==
       await BrowserRecipe.pgpBlockVerifyDecryptedContent(t, browser, { params: url, content: ['1234'], signature });
     }));
 
+    ava.default('verification - message text is rendered prior to pubkey fetching', testWithBrowser('compatibility', async (t, browser) => {
+      const msgId = '17dad75e63e47f97';
+      const acctEmail = 'flowcrypt.compatibility@gmail.com';
+      const senderEmail = 'this.pubkey.takes.long.time.to.load@sender.test';
+      const params = `?frameId=none&acctEmail=${acctEmail}&msgId=${msgId}&signature=___cu_true___&senderEmail=${senderEmail}`;
+      const pgpHostPage = await browser.newPage(t, `chrome/dev/ci_pgp_host_page.htm${params}`);
+      const pgpBlockPage = await pgpHostPage.getFrame(['pgp_block.htm']);
+      await pgpBlockPage.waitForContent('@pgp-block-content', '1234', 4, 10);
+      await pgpBlockPage.waitForContent('@pgp-signature', 'Verifying message', 3, 10);
+      await pgpBlockPage.waitForContent('@pgp-signature', 'matching signature', 10, 10);
+    }));
+
     ava.default('decrypt - fetched pubkey is automatically saved to contacts', testWithBrowser('compatibility', async (t, browser) => {
       const msgId = '17dad75e63e47f97';
       const acctEmail = 'flowcrypt.compatibility@gmail.com';