diff --git a/frontend/cypress/integration/liquid/liquid.spec.ts b/frontend/cypress/integration/liquid/liquid.spec.ts index 44aca078e..bf5c733c1 100644 --- a/frontend/cypress/integration/liquid/liquid.spec.ts +++ b/frontend/cypress/integration/liquid/liquid.spec.ts @@ -18,6 +18,12 @@ describe('Liquid', () => { if (baseModule === 'mempool' || baseModule === 'liquid') { + it('check first mempool block after skeleton loads', () => { + cy.visit(`${basePath}`); + cy.waitForSkeletonGone(); + cy.get('#mempool-block-0 > .blockLink').should('exist'); + }); + it('loads the dashboard', () => { cy.visit(`${basePath}`); cy.waitForSkeletonGone(); diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts index d53c8bb6c..13c0e35b8 100644 --- a/frontend/cypress/integration/mainnet/mainnet.spec.ts +++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts @@ -24,6 +24,12 @@ describe('Mainnet', () => { if (baseModule === 'mempool') { + it('check first mempool block after skeleton loads', () => { + cy.visit('/'); + cy.waitForSkeletonGone(); + cy.get('#mempool-block-0 > .blockLink').should('exist'); + }); + it('loads the status screen', () => { cy.visit('/status'); cy.get('#mempool-block-0').should('be.visible'); diff --git a/frontend/cypress/integration/signet/signet.spec.ts b/frontend/cypress/integration/signet/signet.spec.ts index ec2a0a852..d0d8f67df 100644 --- a/frontend/cypress/integration/signet/signet.spec.ts +++ b/frontend/cypress/integration/signet/signet.spec.ts @@ -17,6 +17,12 @@ describe('Signet', () => { cy.waitForSkeletonGone(); }); + it('check first mempool block after skeleton loads', () => { + cy.visit('/'); + cy.waitForSkeletonGone(); + cy.get('#mempool-block-0 > .blockLink').should('exist'); + }); + it('loads the dashboard with the skeleton blocks', () => { cy.mockMempoolSocket(); cy.visit("/signet"); diff --git a/frontend/cypress/integration/testnet/testnet.spec.ts b/frontend/cypress/integration/testnet/testnet.spec.ts index 6e406c087..861087e2c 100644 --- a/frontend/cypress/integration/testnet/testnet.spec.ts +++ b/frontend/cypress/integration/testnet/testnet.spec.ts @@ -17,6 +17,12 @@ describe('Testnet', () => { cy.waitForSkeletonGone(); }); + it('check first mempool block after skeleton loads', () => { + cy.visit('/'); + cy.waitForSkeletonGone(); + cy.get('#mempool-block-0 > .blockLink').should('exist'); + }); + it('loads the dashboard with the skeleton blocks', () => { cy.mockMempoolSocket(); cy.visit("/testnet"); diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index fe10d56bb..9000aab0b 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -88,12 +88,17 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { block.blink = specialBlocks[block.height] ? true : false; } }); - const stringifiedBlocks = JSON.stringify(mempoolBlocks); - this.mempoolBlocksFull = JSON.parse(stringifiedBlocks); - this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks)); + + if (!mempoolBlocks.length) { + const emptyBlock = [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }]; + this.mempoolBlocks = emptyBlock; + } else { + const stringifiedBlocks = JSON.stringify(mempoolBlocks); + this.mempoolBlocksFull = JSON.parse(stringifiedBlocks); + this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks)); + } this.updateMempoolBlockStyles(); this.calculateTransactionPosition(); - return this.mempoolBlocks; }) );