@@ -15,8 +15,8 @@ import { notFound } from "next/navigation";
1515import type { ReactNode } from "react" ;
1616import { Suspense } from "react" ;
1717
18+ import { getPublishersWithRankings } from "../../get-publishers-with-rankings" ;
1819import {
19- getPublishers ,
2020 getPublisherRankingHistory ,
2121 getPublisherAverageScoreHistory ,
2222} from "../../services/clickhouse" ;
@@ -38,13 +38,13 @@ import {
3838 ExplainActive ,
3939 ExplainInactive ,
4040} from "../Explanations" ;
41+ import { FormattedDate } from "../FormattedDate" ;
4142import { FormattedNumber } from "../FormattedNumber" ;
4243import { PublisherIcon } from "../PublisherIcon" ;
4344import { PublisherKey } from "../PublisherKey" ;
4445import { PublisherTag } from "../PublisherTag" ;
4546import { getPriceFeeds } from "./get-price-feeds" ;
4647import styles from "./layout.module.scss" ;
47- import { FormattedDate } from "../FormattedDate" ;
4848import { FormattedTokens } from "../FormattedTokens" ;
4949import { SemicircleMeter } from "../SemicircleMeter" ;
5050import { TabPanel , TabRoot , Tabs } from "../Tabs" ;
@@ -365,7 +365,7 @@ const ActiveFeedsCard = async ({
365365 publisherKey : string ;
366366} ) => {
367367 const [ publishers , priceFeeds ] = await Promise . all ( [
368- getPublishers ( cluster ) ,
368+ getPublishersWithRankings ( cluster ) ,
369369 getPriceFeeds ( cluster , publisherKey ) ,
370370 ] ) ;
371371 const publisher = publishers . find (
@@ -391,8 +391,8 @@ type ActiveFeedsCardImplProps =
391391 isLoading ?: false | undefined ;
392392 cluster : Cluster ;
393393 publisherKey : string ;
394- activeFeeds : number ;
395- inactiveFeeds : number ;
394+ activeFeeds ? : number | undefined ;
395+ inactiveFeeds ? : number | undefined ;
396396 allFeeds : number ;
397397 } ;
398398
@@ -435,33 +435,27 @@ const ActiveFeedsCardImpl = (props: ActiveFeedsCardImplProps) => (
435435 )
436436 }
437437 miniStat1 = {
438- props . isLoading ? (
439- < Skeleton width = { 10 } />
440- ) : (
441- < >
442- < FormattedNumber
443- maximumFractionDigits = { 1 }
444- value = { ( 100 * props . activeFeeds ) / props . allFeeds }
445- />
446- %
447- </ >
448- )
438+ < RankingMiniStat
439+ { ...( props . isLoading
440+ ? { isLoading : true }
441+ : {
442+ stat : props . activeFeeds ,
443+ allFeeds : props . allFeeds ,
444+ } ) }
445+ />
449446 }
450447 miniStat2 = {
451- props . isLoading ? (
452- < Skeleton width = { 10 } />
453- ) : (
454- < >
455- < FormattedNumber
456- maximumFractionDigits = { 1 }
457- value = { ( 100 * props . inactiveFeeds ) / props . allFeeds }
458- />
459- %
460- </ >
461- )
448+ < RankingMiniStat
449+ { ...( props . isLoading
450+ ? { isLoading : true }
451+ : {
452+ stat : props . inactiveFeeds ,
453+ allFeeds : props . allFeeds ,
454+ } ) }
455+ />
462456 }
463457 >
464- { ! props . isLoading && (
458+ { ! props . isLoading && props . activeFeeds !== undefined && (
465459 < Meter
466460 value = { props . activeFeeds }
467461 maxValue = { props . allFeeds }
@@ -471,6 +465,33 @@ const ActiveFeedsCardImpl = (props: ActiveFeedsCardImplProps) => (
471465 </ StatCard >
472466) ;
473467
468+ const RankingMiniStat = (
469+ props :
470+ | { isLoading : true }
471+ | {
472+ isLoading ?: false | undefined ;
473+ stat : number | undefined ;
474+ allFeeds : number ;
475+ } ,
476+ ) => {
477+ if ( props . isLoading ) {
478+ return < Skeleton width = { 10 } /> ;
479+ } else if ( props . stat === undefined ) {
480+ // eslint-disable-next-line unicorn/no-null
481+ return null ;
482+ } else {
483+ return (
484+ < >
485+ < FormattedNumber
486+ maximumFractionDigits = { 1 }
487+ value = { ( 100 * props . stat ) / props . allFeeds }
488+ />
489+ %
490+ </ >
491+ ) ;
492+ }
493+ } ;
494+
474495const OisPoolCard = async ( { publisherKey } : { publisherKey : string } ) => {
475496 const [ publisherPoolData , publisherCaps ] = await Promise . all ( [
476497 getPublisherPoolData ( ) ,
0 commit comments