diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 560307679b..80b834efde 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -59,8 +59,9 @@ export default React.memo(styled(Apps)`
     display: none;
   }
 
-  .--placeholder {
+  .--tmp {
     background: grey;
-    filter: blur(2px) opacity(0.25);
+    filter: blur(2px);
+    opacity: 0.2;
   }
 `);
diff --git a/packages/page-accounts/src/Accounts/Summary.tsx b/packages/page-accounts/src/Accounts/Summary.tsx
index baf19160bf..5806819ef9 100644
--- a/packages/page-accounts/src/Accounts/Summary.tsx
+++ b/packages/page-accounts/src/Accounts/Summary.tsx
@@ -21,7 +21,7 @@ function Summary ({ balance, className }: Props) {
     <SummaryBox className={className}>
       <CardSummary label={t<string>('total balance')}>
         <FormatBalance
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
           value={balance?.total || 1}
         />
       </CardSummary>
@@ -30,13 +30,13 @@ function Summary ({ balance, className }: Props) {
         label={t<string>('total transferrable')}
       >
         <FormatBalance
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
           value={balance?.transferrable || 1}
         />
       </CardSummary>
       <CardSummary label={t<string>('total locked')}>
         <FormatBalance
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
           value={balance?.locked || 1}
         />
       </CardSummary>
diff --git a/packages/page-alliance/src/Members/Summary.tsx b/packages/page-alliance/src/Members/Summary.tsx
index f9ecddbe5b..0a5ac02383 100644
--- a/packages/page-alliance/src/Members/Summary.tsx
+++ b/packages/page-alliance/src/Members/Summary.tsx
@@ -36,13 +36,13 @@ function Summary ({ className, members, rule }: Props): React.ReactElement<Props
               )
               : t<string>('yes')
             : t<string>('no')
-          : <span className='--placeholder'>{t<string>('no')}</span>
+          : <span className='--tmp'>{t<string>('no')}</span>
         }
       </CardSummary>
       <CardSummary label={t<string>('members')}>
         {members
           ? formatNumber(members.length)
-          : <span className='--placeholder'>99</span>
+          : <span className='--tmp'>99</span>
         }
       </CardSummary>
     </SummaryBox>
diff --git a/packages/page-council/src/Overview/Summary.tsx b/packages/page-council/src/Overview/Summary.tsx
index 478e877709..f97d6e3298 100644
--- a/packages/page-council/src/Overview/Summary.tsx
+++ b/packages/page-council/src/Overview/Summary.tsx
@@ -28,19 +28,19 @@ function Summary ({ bestNumber, className = '', electionsInfo, hasElections }: P
         <CardSummary label={t<string>('seats')}>
           {electionsInfo
             ? <>{formatNumber(electionsInfo.members.length)}{electionsInfo.desiredSeats && <>&nbsp;/&nbsp;{formatNumber(electionsInfo.desiredSeats)}</>}</>
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         {hasElections && (
           <>
             <CardSummary label={t<string>('runners up')}>
               {electionsInfo
                 ? <>{formatNumber(electionsInfo.runnersUp.length)}{electionsInfo.desiredRunnersUp && <>&nbsp;/&nbsp;{formatNumber(electionsInfo.desiredRunnersUp)}</>}</>
-                : <span className='--placeholder'>99 / 99</span>}
+                : <span className='--tmp'>99 / 99</span>}
             </CardSummary>
             <CardSummary label={t<string>('candidates')}>
               {electionsInfo
                 ? formatNumber(electionsInfo.candidateCount)
-                : <span className='--placeholder'>99</span>}
+                : <span className='--tmp'>99</span>}
             </CardSummary>
           </>
         )}
diff --git a/packages/page-council/src/Overview/Voters.tsx b/packages/page-council/src/Overview/Voters.tsx
index 676c2db1dd..e642c214a6 100644
--- a/packages/page-council/src/Overview/Voters.tsx
+++ b/packages/page-council/src/Overview/Voters.tsx
@@ -30,7 +30,7 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
     <>
       <td className='expand'>
         <ExpanderScroll
-          className={balance ? '' : '--placeholder'}
+          className={balance ? '' : '--tmp'}
           renderChildren={renderVoters}
           summary={<FormatBalance value={balance} />}
         />
@@ -38,7 +38,7 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
       <td className='number'>
         {voters
           ? formatNumber(voters.length)
-          : <span className='--placeholder'>123</span>
+          : <span className='--tmp'>123</span>
         }
       </td>
     </>
diff --git a/packages/page-democracy/src/Overview/Summary.tsx b/packages/page-democracy/src/Overview/Summary.tsx
index e080df9f73..1ccfe71411 100644
--- a/packages/page-democracy/src/Overview/Summary.tsx
+++ b/packages/page-democracy/src/Overview/Summary.tsx
@@ -35,24 +35,24 @@ function Summary ({ referendumCount }: Props): React.ReactElement<Props> {
         <CardSummary label={t<string>('proposals')}>
           {activeProposals
             ? formatNumber(activeProposals.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         <CardSummary label={t<string>('total')}>
           {publicPropCount
             ? formatNumber(publicPropCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
       </section>
       <section>
         <CardSummary label={t<string>('referenda')}>
           {referendumCount !== undefined
             ? formatNumber(referendumCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         <CardSummary label={t<string>('total')}>
           {referendumTotal
             ? formatNumber(referendumTotal)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
       </section>
       <section className='media--1100'>
diff --git a/packages/page-explorer/src/BlockInfo/Summary.tsx b/packages/page-explorer/src/BlockInfo/Summary.tsx
index f642fd9c75..4da2d5850e 100644
--- a/packages/page-explorer/src/BlockInfo/Summary.tsx
+++ b/packages/page-explorer/src/BlockInfo/Summary.tsx
@@ -56,7 +56,7 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
           <>
             <CardSummary label={t<string>('deposits')}>
               <FormatBalance
-                className={deposits ? '' : '--placeholder'}
+                className={deposits ? '' : '--tmp'}
                 value={deposits || BN_ONE}
               />
             </CardSummary>
@@ -65,7 +65,7 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
               label={t<string>('transfers')}
             >
               <FormatBalance
-                className={transfers ? '' : '--placeholder'}
+                className={transfers ? '' : '--tmp'}
                 value={transfers || BN_ONE}
               />
             </CardSummary>
@@ -84,19 +84,19 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
         >
           {weight
             ? formatNumber(weight)
-            : <span className='--placeholder'>999,999,999</span>}
+            : <span className='--tmp'>999,999,999</span>}
         </CardSummary>
       </section>
       <section className='media--900'>
         <CardSummary label={t<string>('event count')}>
           {events
             ? formatNumber(events.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         <CardSummary label={t<string>('extrinsic count')}>
           {signedBlock
             ? formatNumber(signedBlock.block.extrinsics.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
       </section>
     </SummaryBox>
diff --git a/packages/page-explorer/src/SummarySession.tsx b/packages/page-explorer/src/SummarySession.tsx
index 601996401b..dfde5711f7 100644
--- a/packages/page-explorer/src/SummarySession.tsx
+++ b/packages/page-explorer/src/SummarySession.tsx
@@ -53,7 +53,7 @@ function SummarySession ({ className, withEra = true, withSession = true }: Prop
                 <CardSummary label={sessionLabel}>
                   #{sessionInfo
                     ? formatNumber(sessionInfo.currentIndex)
-                    : <span className='--placeholder'>123</span>}
+                    : <span className='--tmp'>123</span>}
                   {withEra && activeEraStart && <div className='isSecondary'>&nbsp;</div>}
                 </CardSummary>
               )
@@ -87,10 +87,10 @@ function SummarySession ({ className, withEra = true, withSession = true }: Prop
                 >
                   #{sessionInfo
                     ? formatNumber(sessionInfo.activeEra)
-                    : <span className='--placeholder'>123</span>}
+                    : <span className='--tmp'>123</span>}
                   {activeEraStart && (
                     <Elapsed
-                      className={`${sessionInfo ? '' : '--placeholder'} isSecondary`}
+                      className={`${sessionInfo ? '' : '--tmp'} isSecondary`}
                       value={activeEraStart}
                     >
                       &nbsp;{t('elapsed')}
diff --git a/packages/page-parachains/src/Auctions/Summary.tsx b/packages/page-parachains/src/Auctions/Summary.tsx
index 100ececc38..4be5443042 100644
--- a/packages/page-parachains/src/Auctions/Summary.tsx
+++ b/packages/page-parachains/src/Auctions/Summary.tsx
@@ -32,14 +32,14 @@ function Summary ({ auctionInfo, className, lastWinners }: Props): React.ReactEl
         <CardSummary label={t<string>('auctions')}>
           {auctionInfo
             ? formatNumber(auctionInfo.numAuctions)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         <CardSummary label={t<string>('active')}>
           {auctionInfo
             ? auctionInfo.leasePeriod
               ? t<string>('yes')
               : t<string>('no')
-            : <span className='--placeholder'>{t<string>('no')}</span>
+            : <span className='--tmp'>{t<string>('no')}</span>
           }
         </CardSummary>
       </section>
diff --git a/packages/page-parachains/src/Crowdloan/Fund.tsx b/packages/page-parachains/src/Crowdloan/Fund.tsx
index 312cb01b05..1488e8a47e 100644
--- a/packages/page-parachains/src/Crowdloan/Fund.tsx
+++ b/packages/page-parachains/src/Crowdloan/Fund.tsx
@@ -148,7 +148,7 @@ function Fund ({ bestHash, bestNumber, className = '', isOngoing, leasePeriod, v
               )}
             </>
           )
-          : <span className='--placeholder'>999</span>
+          : <span className='--tmp'>999</span>
         }
       </td>
       <td className='button media--1000'>
diff --git a/packages/page-parachains/src/Crowdloan/Summary.tsx b/packages/page-parachains/src/Crowdloan/Summary.tsx
index 4ec0276a9e..a1de62b537 100644
--- a/packages/page-parachains/src/Crowdloan/Summary.tsx
+++ b/packages/page-parachains/src/Crowdloan/Summary.tsx
@@ -28,7 +28,7 @@ function Summary ({ activeCap, activeRaised, className, fundCount, isLoading, to
     <SummaryBox className={className}>
       <CardSummary label={t<string>('funds')}>
         {fundCount === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
           : formatNumber(fundCount)}
       </CardSummary>
       <CardSummary
@@ -40,7 +40,7 @@ function Summary ({ activeCap, activeRaised, className, fundCount, isLoading, to
           value: isLoading ? BN_TWO : activeRaised
         }}
       >
-        <span className={isLoading ? '--placeholder' : ''}>
+        <span className={isLoading ? '--tmp' : ''}>
           <FormatBalance
             value={activeRaised}
             withCurrency={false}
@@ -62,7 +62,7 @@ function Summary ({ activeCap, activeRaised, className, fundCount, isLoading, to
           value: isLoading ? BN_TWO : totalRaised
         }}
       >
-        <span className={isLoading ? '--placeholder' : ''}>
+        <span className={isLoading ? '--tmp' : ''}>
           <FormatBalance
             value={totalRaised}
             withCurrency={false}
diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index 88541dca0d..37962caddb 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -105,7 +105,7 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
       </td>
       <td className='number media--1400'>
         <Expander
-          className={validators ? '' : '--placeholder'}
+          className={validators ? '' : '--tmp'}
           renderChildren={valRender}
           summary={t<string>('Val. Group {{group}} ({{count}})', {
             replace: {
diff --git a/packages/page-parachains/src/Overview/Summary.tsx b/packages/page-parachains/src/Overview/Summary.tsx
index ea5b6a4185..2980ad3109 100644
--- a/packages/page-parachains/src/Overview/Summary.tsx
+++ b/packages/page-parachains/src/Overview/Summary.tsx
@@ -28,7 +28,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
         <CardSummary label={t<string>('parachains')}>
           {isNumber(parachainCount)
             ? formatNumber(parachainCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         <CardSummary
           className='media--1000'
@@ -36,7 +36,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
         >
           {isNumber(upcomingCount)
             ? formatNumber(upcomingCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         {isNumber(proposalCount) && (
           <CardSummary
@@ -51,7 +51,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
         <CardSummary label={t<string>('current lease')}>
           {leasePeriod
             ? formatNumber(leasePeriod.currentPeriod)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         <CardSummary
           className='media--1200'
diff --git a/packages/page-preimages/src/Preimages/Call.tsx b/packages/page-preimages/src/Preimages/Call.tsx
index 861f45bdf1..77f4d43c81 100644
--- a/packages/page-preimages/src/Preimages/Call.tsx
+++ b/packages/page-preimages/src/Preimages/Call.tsx
@@ -11,41 +11,55 @@ import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
+  noTmp?: boolean;
   value?: Preimage;
 }
 
+const NULL_ADDR = '0x1234567812345678123456781234567812345678123456781234567812345678';
+
 function PreimageCall ({ className = '', value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
     <>
       <td className={`${className} all`}>
-        {value && (
-          <>
-            {value.proposal && (
-              <CallExpander
-                labelHash={t<string>('call')}
-                value={value.proposal}
-              />
-            )}
-            {
-              value.proposalError
+        {value && value.isCompleted
+          ? (
+            <>
+              {value.proposal && (
+                <CallExpander
+                  labelHash={t<string>('call')}
+                  value={value.proposal}
+                />
+              )}
+              {value.proposalError
                 ? <MarkError content={value.proposalError} />
                 : value.proposalWarning
                   ? <MarkWarning content={value.proposalWarning} />
                   : null
-            }
-          </>
-        )}
+              }
+            </>
+          )
+          : <div className='--tmp'>balances.transfer</div>
+        }
       </td>
       <td className='address media--1300'>
-        {value?.deposit && (
-          <AddressMini
-            balance={value.deposit.amount}
-            value={value.deposit.who}
-            withBalance
-          />
-        )}
+        {value && value.isCompleted
+          ? value.deposit
+            ? (
+              <AddressMini
+                balance={value.deposit.amount}
+                value={value.deposit.who}
+                withBalance
+              />
+            )
+            : null
+          : (
+            <AddressMini
+              className='--tmp'
+              value={NULL_ADDR}
+            />
+          )}
       </td>
     </>
   );
diff --git a/packages/page-preimages/src/Preimages/Preimage.tsx b/packages/page-preimages/src/Preimages/Preimage.tsx
index ea535e84db..705f833c91 100644
--- a/packages/page-preimages/src/Preimages/Preimage.tsx
+++ b/packages/page-preimages/src/Preimages/Preimage.tsx
@@ -25,12 +25,9 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
       <Hash value={value} />
       <Call value={info} />
       <td className='number media--1000'>
-        {info
-          ? info.bytes
-            ? formatNumber(info.bytes.length)
-            : null
-          : <span className='--placeholder'>999,999</span>
-        }
+        {info && info.proposalLength
+          ? formatNumber(info.proposalLength)
+          : <span className='--tmp'>999,999</span>}
       </td>
       <td className='preimage-status together media--1200'>
         {info
@@ -40,8 +37,7 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
               <Free value={info} />
             </>
           )
-          : <span className='--placeholder'>Unrequested</span>
-        }
+          : <span className='--tmp'>Unrequested</span>}
       </td>
     </tr>
   );
diff --git a/packages/page-preimages/src/Preimages/Summary.tsx b/packages/page-preimages/src/Preimages/Summary.tsx
index 69c132a115..69539af6e3 100644
--- a/packages/page-preimages/src/Preimages/Summary.tsx
+++ b/packages/page-preimages/src/Preimages/Summary.tsx
@@ -20,7 +20,7 @@ function Summary ({ className, hashes }: Props): React.ReactElement<Props> {
     <SummaryBox className={className}>
       <CardSummary label={t<string>('images')}>
         {hashes === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
           : formatNumber(hashes.length)
         }
       </CardSummary>
diff --git a/packages/page-preimages/src/Preimages/index.tsx b/packages/page-preimages/src/Preimages/index.tsx
index 08960d35c0..36dd2dc788 100644
--- a/packages/page-preimages/src/Preimages/index.tsx
+++ b/packages/page-preimages/src/Preimages/index.tsx
@@ -27,7 +27,7 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
   const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
     [t('preimages'), 'start', 2],
     [undefined, 'media--1300'],
-    [t('size'), 'media--1000'],
+    [t('length'), 'media--1000'],
     [t('status'), 'start media--1200']
   ]);
 
diff --git a/packages/page-preimages/src/types.ts b/packages/page-preimages/src/types.ts
index 8249b74257..51f63a54fd 100644
--- a/packages/page-preimages/src/types.ts
+++ b/packages/page-preimages/src/types.ts
@@ -8,18 +8,28 @@ import type { Registry } from '@polkadot/types/types';
 import type { BN } from '@polkadot/util';
 import type { HexString } from '@polkadot/util/types';
 
-export interface Preimage {
-  deposit?: {
-    amount: BN;
-    who: string;
-  };
+export interface PreimageDeposit {
+  amount: BN;
+  who: string;
+}
+
+export interface PreimageStatus {
   count: number;
-  bytes: Bytes | null;
-  proposal: Call | null;
-  proposalError: string | null;
+  deposit?: PreimageDeposit;
+  isCompleted: boolean;
   proposalHash: HexString;
-  proposalLength: BN;
-  proposalWarning: string | null;
+  proposalLength?: BN;
   registry: Registry;
   status: PalletPreimageRequestStatus | null;
 }
+
+export interface PreimageBytes {
+  bytes?: Bytes | null;
+  proposal?: Call | null;
+  proposalError?: string | null;
+  proposalWarning?: string | null;
+}
+
+export interface Preimage extends PreimageBytes, PreimageStatus {
+  // just the interfaces above
+}
diff --git a/packages/page-preimages/src/usePreimage.ts b/packages/page-preimages/src/usePreimage.ts
index f54a5aed35..7385cecea4 100644
--- a/packages/page-preimages/src/usePreimage.ts
+++ b/packages/page-preimages/src/usePreimage.ts
@@ -2,37 +2,70 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ApiPromise } from '@polkadot/api';
-import type { Bytes, Option } from '@polkadot/types';
-import type { AccountId32, Call, Hash } from '@polkadot/types/interfaces';
+import type { Bytes } from '@polkadot/types';
+import type { AccountId, Balance, Call, Hash } from '@polkadot/types/interfaces';
 import type { FrameSupportPreimagesBounded, PalletPreimageRequestStatus } from '@polkadot/types/lookup';
-import type { BN } from '@polkadot/util';
+import type { ITuple } from '@polkadot/types/types';
 import type { HexString } from '@polkadot/util/types';
-import type { Preimage } from './types';
+import type { Preimage, PreimageDeposit, PreimageStatus } from './types';
 
 import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
-import { BN_ZERO, isBn, isString } from '@polkadot/util';
+import { Option } from '@polkadot/types';
+import { BN, BN_ZERO, formatNumber, isString, objectSpread } from '@polkadot/util';
 
-interface BytesParams {
-  deposit: [AccountId32, BN] | null;
-  params: [[hexHash: HexString, length: BN]]
+type BytesParams = [[proposalHash: HexString, proposalLength: BN]] | [proposalHash: HexString];
+
+interface InterimResult {
+  paramsBytes?: BytesParams;
+  preimageStatus?: PreimageStatus;
 }
 
-function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestStatus>, optBytes: Option<Bytes>, { deposit, params: [[proposalHash, proposalLength]] }: BytesParams): Preimage {
-  const status = optStatus.unwrapOr(null);
+type Result = 'unknown' | 'hash' | 'hashAndLen';
+
+export function getParamType (api: ApiPromise): Result {
+  if ((
+    api.query.preimage &&
+    api.query.preimage.preimageFor &&
+    api.query.preimage.preimageFor.creator.meta.type.isMap
+  )) {
+    const { type } = api.registry.lookup.getTypeDef(api.query.preimage.preimageFor.creator.meta.type.asMap.key);
+
+    if (type === 'H256') {
+      return 'hash';
+    } else if (type === '(H256,u32)') {
+      return 'hashAndLen';
+    } else {
+      // we are clueless :()
+    }
+  }
+
+  return 'unknown';
+}
+
+function createResult (api: ApiPromise, preimageStatus: PreimageStatus, optBytes: Option<Bytes>): Preimage {
   const bytes = optBytes.unwrapOr(null);
-  let count = 0;
   let proposal: Call | null = null;
   let proposalError: string | null = null;
   let proposalWarning: string | null = null;
+  let proposalLength: BN | undefined;
 
   if (bytes) {
     try {
       proposal = api.registry.createType('Call', bytes.toU8a(true));
 
-      if (proposal.encodedLength !== proposalLength.toNumber()) {
-        proposalWarning = 'Call length does not match on-chain stored preimage length';
+      const callLength = proposal.encodedLength;
+
+      if (preimageStatus.proposalLength) {
+        const storeLength = preimageStatus.proposalLength.toNumber();
+
+        if (callLength !== storeLength) {
+          proposalWarning = `Decoded call length does not match on-chain stored preimage length (${formatNumber(callLength)} bytes vs ${formatNumber(storeLength)} bytes)`;
+        }
+      } else {
+        // for the old style, we set the actual length
+        proposalLength = new BN(callLength);
       }
     } catch (error) {
       console.error(error);
@@ -43,57 +76,78 @@ function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestS
     proposalWarning = 'No preimage bytes found';
   }
 
-  if (status && status.isRequested) {
-    const req = status.asRequested;
-
-    // the original version has asRequested as the actual count
-    // (current/later versions has it as a structure)
-    count = isBn(req)
-      ? req.toNumber()
-      : req.count.toNumber();
-  }
-
-  return {
+  return objectSpread<Preimage>({}, preimageStatus, {
     bytes,
-    count,
-    deposit: deposit
-      ? { amount: deposit[1], who: deposit[0].toString() }
-      : undefined,
+    isCompleted: true,
     proposal,
     proposalError,
-    proposalHash,
-    proposalLength,
+    proposalLength: proposalLength || preimageStatus.proposalLength,
     proposalWarning,
+    registry: api.registry
+  });
+}
+
+function convertDeposit (deposit?: [AccountId, Balance] | null): PreimageDeposit | undefined {
+  return deposit
+    ? {
+      amount: deposit[1],
+      who: deposit[0].toString()
+    }
+    : undefined;
+}
+
+function getBytesParams (api: ApiPromise, hash: Hash | HexString, optStatus: Option<PalletPreimageRequestStatus>): InterimResult {
+  const isHashParam = getParamType(api) === 'hash';
+  const status = optStatus.unwrapOr(null);
+  const preimageStatus: PreimageStatus = {
+    count: 0,
+    isCompleted: false,
+    proposalHash: isString(hash)
+      ? hash
+      : hash.toHex(),
     registry: api.registry,
     status
   };
-}
 
-function getBytesParams (hash: Hash | HexString, optStatus: Option<PalletPreimageRequestStatus>): BytesParams {
-  const status = optStatus.unwrapOr(null);
-  const hexHash = isString(hash)
-    ? hash
-    : hash.toHex();
+  if (status) {
+    if (status.isRequested) {
+      const asRequested = status.asRequested;
 
-  if (!status) {
-    return {
-      deposit: null,
-      params: [[hexHash, BN_ZERO]]
-    };
-  } else if (status.isRequested) {
-    const { deposit, len } = status.asRequested;
+      if (asRequested instanceof Option) {
+        // FIXME Cannot recall how to deal with these
+        // (unlike Unrequested below, didn't have an example)
+      } else {
+        const { count, deposit, len } = asRequested;
 
-    return {
-      deposit: deposit.unwrapOr(null),
-      params: [[hexHash, len.unwrapOr(BN_ZERO)]]
-    };
+        preimageStatus.count = count.toNumber();
+        preimageStatus.deposit = convertDeposit(deposit.unwrapOr(null));
+        preimageStatus.proposalLength = len.unwrapOr(BN_ZERO);
+      }
+    } else if (status.isUnrequested) {
+      const asUnrequested = status.asUnrequested;
+
+      if (asUnrequested instanceof Option) {
+        preimageStatus.deposit = convertDeposit(
+          // old-style conversion
+          (asUnrequested as Option<ITuple<[AccountId, Balance]>>).unwrapOr(null)
+        );
+      } else {
+        const { deposit, len } = status.asUnrequested;
+
+        preimageStatus.deposit = convertDeposit(deposit);
+        preimageStatus.proposalLength = len;
+      }
+    } else {
+      // for future reference...
+      console.error('Unhandled preimage status type: ', status.type);
+    }
   }
 
-  const { deposit, len } = status.asUnrequested;
-
   return {
-    deposit,
-    params: [[hexHash, len]]
+    paramsBytes: isHashParam
+      ? [preimageStatus.proposalHash]
+      : [[preimageStatus.proposalHash, preimageStatus.proposalLength || BN_ZERO]],
+    preimageStatus
   };
 }
 
@@ -120,26 +174,32 @@ function usePreimageImpl (hashOrBounded?: Hash | HexString | FrameSupportPreimag
   const paramsStatus = useMemo(
     // we need a hash _and_ be on the newest supported version of the pallet
     // (after the application of bounded calls)
-    () => api.query.preimage?.preimageFor?.creator.meta.type.isMap && api.registry.lookup.getTypeDef(api.query.preimage.preimageFor.creator.meta.type.asMap.key).type === '(H256,u32)' && hashOrBounded
+    () => hashOrBounded
       ? [getPreimageHash(hashOrBounded)]
       : undefined,
-    [api, hashOrBounded]
+    [hashOrBounded]
   );
 
   const optStatus = useCall<Option<PalletPreimageRequestStatus>>(paramsStatus && api.query.preimage?.statusFor, paramsStatus);
 
   // from the retrieved status (if any), get the on-chain stored bytes
-  const paramsBytes = useMemo(
-    () => paramsStatus && optStatus && getBytesParams(paramsStatus[0], optStatus),
-    [optStatus, paramsStatus]
+  const { paramsBytes, preimageStatus } = useMemo(
+    () => paramsStatus && optStatus
+      ? getBytesParams(api, paramsStatus[0], optStatus)
+      : {},
+    [api, optStatus, paramsStatus]
   );
 
-  const optBytes = useCall<Option<Bytes>>(paramsBytes && api.query.preimage?.preimageFor, paramsBytes && paramsBytes.params);
+  const optBytes = useCall<Option<Bytes>>(paramsBytes && api.query.preimage?.preimageFor, paramsBytes);
 
   // extract all the preimage info we have retrieved
   return useMemo(
-    () => optBytes && optStatus && paramsBytes && createResult(api, optStatus, optBytes, paramsBytes),
-    [api, optBytes, optStatus, paramsBytes]
+    () => preimageStatus
+      ? optBytes
+        ? createResult(api, preimageStatus, optBytes)
+        : preimageStatus
+      : undefined,
+    [api, optBytes, preimageStatus]
   );
 }
 
diff --git a/packages/page-preimages/src/usePreimages.ts b/packages/page-preimages/src/usePreimages.ts
index 00091abf92..41e38ffb8f 100644
--- a/packages/page-preimages/src/usePreimages.ts
+++ b/packages/page-preimages/src/usePreimages.ts
@@ -10,6 +10,8 @@ import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useEventChanges, useMapKeys } from '@polkadot/react-hooks';
 
+const EMPTY_PARAMS: unknown[] = [];
+
 const OPT_HASH = {
   transform: (keys: StorageKey<[Hash]>[]): Hash[] =>
     keys.map(({ args: [hash] }) => hash)
@@ -32,7 +34,7 @@ function filter (records: EventRecord[]): Changes<Hash> {
 
 function usePreimagesImpl (): HexString[] | undefined {
   const { api } = useApi();
-  const startValue = useMapKeys(api.query.preimage.statusFor, [], OPT_HASH);
+  const startValue = useMapKeys(api.query.preimage.statusFor, EMPTY_PARAMS, OPT_HASH);
   const hashes = useEventChanges([
     api.events.preimage.Cleared,
     api.events.preimage.Noted
diff --git a/packages/page-ranked/src/Members/Summary.tsx b/packages/page-ranked/src/Members/Summary.tsx
index eeab37f316..f68146c50c 100644
--- a/packages/page-ranked/src/Members/Summary.tsx
+++ b/packages/page-ranked/src/Members/Summary.tsx
@@ -22,7 +22,7 @@ function Summary ({ className, members }: Props): React.ReactElement<Props> {
     <SummaryBox className={className}>
       <CardSummary label={t<string>('members')}>
         {members === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
           : formatNumber(members.length)
         }
       </CardSummary>
diff --git a/packages/page-referenda/src/Referenda/Summary.tsx b/packages/page-referenda/src/Referenda/Summary.tsx
index dced4adf73..d9f364a1fb 100644
--- a/packages/page-referenda/src/Referenda/Summary.tsx
+++ b/packages/page-referenda/src/Referenda/Summary.tsx
@@ -29,13 +29,13 @@ function Summary ({ className, issuanceActive, issuanceInactive, issuanceTotal,
       <section>
         <CardSummary label={t<string>('active')}>
           {refActive === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
             : formatNumber(refActive)
           }
         </CardSummary>
         <CardSummary label={t<string>('total')}>
           {refCount === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
             : formatNumber(refCount)
           }
         </CardSummary>
@@ -66,7 +66,7 @@ function Summary ({ className, issuanceActive, issuanceInactive, issuanceTotal,
           )}
           <CardSummary label={t<string>('total issuance')}>
             <FormatBalance
-              className={issuanceTotal ? '' : '--placeholder'}
+              className={issuanceTotal ? '' : '--tmp'}
               value={issuanceTotal || 1}
               withSi
             />
diff --git a/packages/page-scheduler/src/Scheduled.tsx b/packages/page-scheduler/src/Scheduled.tsx
index e01f5ccb0d..7132af9213 100644
--- a/packages/page-scheduler/src/Scheduled.tsx
+++ b/packages/page-scheduler/src/Scheduled.tsx
@@ -20,7 +20,6 @@ interface Props {
 
 function Scheduled ({ bestNumber, className = '', value: { blockNumber, call, maybeId, maybePeriodic, preimageHash } }: Props): React.ReactElement<Props> {
   const preimage = usePreimage(preimageHash);
-
   const period = maybePeriodic.unwrapOr(null);
   const name = maybeId.unwrapOr(null);
 
diff --git a/packages/page-staking/src/Bags/Bag.tsx b/packages/page-staking/src/Bags/Bag.tsx
index 2d49b8d758..5ac85d288f 100644
--- a/packages/page-staking/src/Bags/Bag.tsx
+++ b/packages/page-staking/src/Bags/Bag.tsx
@@ -81,7 +81,7 @@ function Bag ({ bagLower, bagUpper, info, nodesOwn }: Props): React.ReactElement
       </td>
       <td className='number'>
         {isLoading
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
           : list.length
             ? formatNumber(list.length)
             : null
diff --git a/packages/page-staking/src/Bags/Summary.tsx b/packages/page-staking/src/Bags/Summary.tsx
index 65d46a4336..efe03ffbae 100644
--- a/packages/page-staking/src/Bags/Summary.tsx
+++ b/packages/page-staking/src/Bags/Summary.tsx
@@ -34,20 +34,20 @@ function Summary ({ bags, className = '', mapOwn }: Props): React.ReactElement<P
       <CardSummary label={t<string>('total bags')}>
         {bags
           ? formatNumber(bags.length)
-          : <span className='--placeholder'>99</span>
+          : <span className='--tmp'>99</span>
         }
       </CardSummary>
       <section>
         <CardSummary label={t<string>('total nodes')}>
           {mapOwn
             ? formatNumber(total)
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>99</span>
           }
         </CardSummary>
         <CardSummary label={t<string>('my nodes')}>
           {isNumber(myCount)
             ? formatNumber(myCount)
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>99</span>
           }
         </CardSummary>
       </section>
diff --git a/packages/page-staking/src/Payouts/Stash.tsx b/packages/page-staking/src/Payouts/Stash.tsx
index f2cb7bb3cc..8cca59a6fd 100644
--- a/packages/page-staking/src/Payouts/Stash.tsx
+++ b/packages/page-staking/src/Payouts/Stash.tsx
@@ -49,7 +49,7 @@ function Stash ({ className = '', historyDepth, payout: { available, rewards, st
       <td className='number'><FormatBalance value={available} /></td>
       <td className='number'>
         <BlockToTime
-          className={eraBlocks ? '' : '--placeholder'}
+          className={eraBlocks ? '' : '--tmp'}
           value={eraBlocks || BN_MILLION}
         />
       </td>
diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx
index 14cd296069..df8d5df7bc 100644
--- a/packages/page-staking/src/Pools/Pool.tsx
+++ b/packages/page-staking/src/Pools/Pool.tsx
@@ -60,17 +60,17 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
           <div className={`${isExpanded ? '' : 'clamp'}`}>
             {info
               ? info.metadata
-              : <span className='--placeholder'>This is a pool placeholder</span>}
+              : <span className='--tmp'>This is a pool placeholder</span>}
           </div>
         </td>
         <td className='number media--1100'>
           {info
             ? info.bonded.state.type
-            : <span className='--placeholder'>Destroying</span>}
+            : <span className='--tmp'>Destroying</span>}
         </td>
         <td className='number'>
           <FormatBalance
-            className={info ? '' : '--placeholder'}
+            className={info ? '' : '--tmp'}
             value={info?.bonded.points || 1}
           />
         </td>
diff --git a/packages/page-staking/src/Targets/Summary.tsx b/packages/page-staking/src/Targets/Summary.tsx
index 6ceb199334..2f22213b0f 100644
--- a/packages/page-staking/src/Targets/Summary.tsx
+++ b/packages/page-staking/src/Targets/Summary.tsx
@@ -71,7 +71,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
           progress={progressStake}
         >
           <FormatBalance
-            className={progressStake.isBlurred ? '--placeholder' : ''}
+            className={progressStake.isBlurred ? '--tmp' : ''}
             value={progressStake.total}
             withSi
           />
@@ -83,7 +83,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
             ? Number.isFinite(stakedReturn)
               ? <>{stakedReturn.toFixed(1)}%</>
               : '-.-%'
-            : <span className='--placeholder'>0.0%</span>
+            : <span className='--tmp'>0.0%</span>
           }
         </CardSummary>
       </section>
@@ -92,7 +92,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
           label={`${t<string>('lowest / avg staked')}`}
           progress={progressAvg}
         >
-          <span className={progressAvg.isBlurred ? '--placeholder' : ''}>
+          <span className={progressAvg.isBlurred ? '--tmp' : ''}>
             <FormatBalance
               value={progressAvg.value}
               withCurrency={false}
@@ -100,7 +100,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
             />
             &nbsp;/&nbsp;
             <FormatBalance
-              className={progressAvg.isBlurred ? '--placeholder' : ''}
+              className={progressAvg.isBlurred ? '--tmp' : ''}
               value={progressAvg.total}
               withSi
             />
@@ -136,7 +136,7 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
       <section>
         <CardSummary label={t<string>('last reward')}>
           <FormatBalance
-            className={lastReward ? '' : '--placeholder'}
+            className={lastReward ? '' : '--tmp'}
             value={lastReward || 1}
             withSi
           />
diff --git a/packages/page-staking/src/Validators/Address/StakeOther.tsx b/packages/page-staking/src/Validators/Address/StakeOther.tsx
index f2a49c30d1..9b218b1bf9 100644
--- a/packages/page-staking/src/Validators/Address/StakeOther.tsx
+++ b/packages/page-staking/src/Validators/Address/StakeOther.tsx
@@ -73,7 +73,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
     <td className='expand all'>
       {(!rewarded || rewarded[0] !== 0) && (
         <ExpanderScroll
-          className={rewarded ? '' : '--placeholder'}
+          className={rewarded ? '' : '--tmp'}
           renderChildren={rewarded && rewarded[1]}
           summary={
             <FormatBalance
diff --git a/packages/page-staking/src/Validators/Address/index.tsx b/packages/page-staking/src/Validators/Address/index.tsx
index 442cae74d4..8d0dc75732 100644
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@@ -167,7 +167,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
           )
         }
         <td className='number'>
-          {commission || <span className='--placeholder'>50.00%</span>}
+          {commission || <span className='--tmp'>50.00%</span>}
         </td>
         {isMain && (
           <td className='number'>
diff --git a/packages/page-staking/src/Validators/Summary.tsx b/packages/page-staking/src/Validators/Summary.tsx
index ed1440e77d..163436a5ba 100644
--- a/packages/page-staking/src/Validators/Summary.tsx
+++ b/packages/page-staking/src/Validators/Summary.tsx
@@ -29,7 +29,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
         <CardSummary label={t<string>('validators')}>
           {stakingOverview
             ? <>{formatNumber(stakingOverview.validators.length)}&nbsp;/&nbsp;{formatNumber(stakingOverview.validatorCount)}</>
-            : <span className='--placeholder'>99&nbsp;/&nbsp;99</span>
+            : <span className='--tmp'>999 / 999</span>
           }
         </CardSummary>
         <CardSummary
@@ -38,7 +38,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
         >
           {waitingIds
             ? formatNumber(waitingIds.length)
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>99</span>
           }
         </CardSummary>
         <CardSummary
@@ -58,7 +58,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
                 )}
               </>
             )
-            : <span className='--placeholder'>99</span>
+            : <span className='--tmp'>999 / 999</span>
           }
         </CardSummary>
       </section>
diff --git a/packages/page-tech-comm/src/Overview/Summary.tsx b/packages/page-tech-comm/src/Overview/Summary.tsx
index b9aab36ec4..bb62f214d1 100644
--- a/packages/page-tech-comm/src/Overview/Summary.tsx
+++ b/packages/page-tech-comm/src/Overview/Summary.tsx
@@ -26,12 +26,12 @@ function Summary ({ className = '', members, proposalHashes, type }: Props): Rea
         <CardSummary label={t<string>('proposals')}>
           {proposalHashes
             ? formatNumber(proposalHashes?.length)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
         <CardSummary label={t<string>('total')}>
           {proposalCount
             ? formatNumber(proposalCount)
-            : <span className='--placeholder'>99</span>}
+            : <span className='--tmp'>99</span>}
         </CardSummary>
       </section>
     </SummaryBox>
diff --git a/packages/page-treasury/src/Overview/Summary.tsx b/packages/page-treasury/src/Overview/Summary.tsx
index 8a3c8cee87..e94d96bf87 100644
--- a/packages/page-treasury/src/Overview/Summary.tsx
+++ b/packages/page-treasury/src/Overview/Summary.tsx
@@ -39,7 +39,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
           label={t<string>('open')}
         >
           {proposalCount === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
             : formatNumber(proposalCount)}
         </CardSummary>
         <CardSummary
@@ -47,7 +47,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
           label={t<string>('approved')}
         >
           {approvalCount === undefined
-            ? <span className='--placeholder'>99</span>
+            ? <span className='--tmp'>99</span>
             : formatNumber(approvalCount)}
         </CardSummary>
         <CardSummary
@@ -55,7 +55,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
           label={t<string>('total')}
         >
           {totalProposals === undefined
-            ? totalProposals
+            ? <span className='--tmp'>99</span>
             : formatNumber(totalProposals)}
         </CardSummary>
       </section>
@@ -87,7 +87,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
           label={t<string>('next burn')}
         >
           <FormatBalance
-            className={burn ? '' : '--placeholder'}
+            className={burn ? '' : '--tmp'}
             value={burn || 1}
             withSi
           />
@@ -103,7 +103,7 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
             value: hasSpendable ? spendable : BN_TWO
           }}
         >
-          <span className={hasSpendable ? '' : '--placeholder'}>
+          <span className={hasSpendable ? '' : '--tmp'}>
             <FormatBalance
               value={spendable || BN_TWO}
               withSi
diff --git a/packages/page-whitelist/src/Hashes/Summary.tsx b/packages/page-whitelist/src/Hashes/Summary.tsx
index 5427cc1ff8..c9b055cc47 100644
--- a/packages/page-whitelist/src/Hashes/Summary.tsx
+++ b/packages/page-whitelist/src/Hashes/Summary.tsx
@@ -20,7 +20,7 @@ function Summary ({ className, hashes }: Props): React.ReactElement<Props> {
     <SummaryBox className={className}>
       <CardSummary label={t<string>('hashes')}>
         {hashes === undefined
-          ? <span className='--placeholder'>99</span>
+          ? <span className='--tmp'>99</span>
           : formatNumber(hashes.length)
         }
       </CardSummary>
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index 3b4de0e0d8..91ce93d14e 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -242,7 +242,7 @@ function createBalanceItems (formatIndex: number, lookup: Record<string, string>
     <React.Fragment key={0}>
       <Label label={withLabel ? t<string>('total') : ''} />
       <FormatBalance
-        className={`result ${balancesAll ? '' : '--placeholder'}`}
+        className={`result ${balancesAll ? '' : '--tmp'}`}
         formatIndex={formatIndex}
         labelPost={<IconVoid />}
         value={balancesAll ? balancesAll.freeBalance.add(balancesAll.reservedBalance) : 1}
diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx
index e95fd2db24..cc81ae2c73 100644
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@@ -72,7 +72,7 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
             <>
               {isTimed && !children && (
                 <BlockToTime
-                  className={progress.isBlurred ? '--placeholder' : ''}
+                  className={progress.isBlurred ? '--tmp' : ''}
                   value={progress.total}
                 />
               )}
@@ -87,7 +87,7 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
                     }`
                     : (
                       <BlockToTime
-                        className={`${progress.isBlurred ? '--placeholder' : ''} timer`}
+                        className={`${progress.isBlurred ? '--tmp' : ''} timer`}
                         value={progress.total.sub(progress.value)}
                       />
                     )
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index e81f1dd6b7..73dfdc1005 100644
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@@ -48,7 +48,7 @@ function Progress ({ className = '', isBlurred, isDisabled, total, value }: Prop
   const drawAngle = (angle === 360) ? 360 : angle % 360;
 
   return (
-    <div className={`ui--Progress ${isDisabled ? 'isDisabled' : ''} ${isBlurred ? '--placeholder' : ''} ${className}`}>
+    <div className={`ui--Progress ${isDisabled ? 'isDisabled' : ''} ${isBlurred ? '--tmp' : ''} ${className}`}>
       <div className='background highlight--bg' />
       <Clip
         angle={
diff --git a/packages/react-query/src/BestFinalized.tsx b/packages/react-query/src/BestFinalized.tsx
index d0233d3466..a6679a6baa 100644
--- a/packages/react-query/src/BestFinalized.tsx
+++ b/packages/react-query/src/BestFinalized.tsx
@@ -20,7 +20,7 @@ function BestFinalized ({ children, className = '', label }: Props): React.React
   const bestNumberFinalized = useCall<BlockNumber>(api.derive.chain.bestNumberFinalized);
 
   return (
-    <div className={`${className} ${bestNumberFinalized ? '' : '--placeholder'}`}>
+    <div className={`${className} ${bestNumberFinalized ? '' : '--tmp'}`}>
       {label || ''}{
         <Digits value={formatNumber(bestNumberFinalized || 1234)} />
       }{children}
diff --git a/packages/react-query/src/BestNumber.tsx b/packages/react-query/src/BestNumber.tsx
index fc5cdf2809..0dab40b966 100644
--- a/packages/react-query/src/BestNumber.tsx
+++ b/packages/react-query/src/BestNumber.tsx
@@ -22,7 +22,7 @@ function BestNumber ({ children, className = '', isFinalized, label, withPound }
   const bestNumber = useCall<BlockNumber>(isApiReady && (isFinalized ? api.derive.chain.bestNumberFinalized : api.derive.chain.bestNumber));
 
   return (
-    <div className={`${className} ${bestNumber ? '' : '--placeholder'}`}>
+    <div className={`${className} ${bestNumber ? '' : '--tmp'}`}>
       {label || ''}{withPound && '#'}{
         <Digits value={formatNumber(bestNumber || 1234)} />
       }{children}
diff --git a/packages/react-query/src/TimeNow.tsx b/packages/react-query/src/TimeNow.tsx
index 827a696118..ed7543d429 100644
--- a/packages/react-query/src/TimeNow.tsx
+++ b/packages/react-query/src/TimeNow.tsx
@@ -26,7 +26,7 @@ function TimeNow ({ children, className = '', label, value }: Props): React.Reac
   );
 
   return (
-    <div className={`${className} ${hasValue ? '' : '--placeholder'}`}>
+    <div className={`${className} ${hasValue ? '' : '--tmp'}`}>
       {label || ''}
       <Elapsed value={hasValue ? now : Date.now()} />
       {children}
diff --git a/packages/react-query/src/TotalInactive.tsx b/packages/react-query/src/TotalInactive.tsx
index f4733a3d66..9f85ab9393 100644
--- a/packages/react-query/src/TotalInactive.tsx
+++ b/packages/react-query/src/TotalInactive.tsx
@@ -21,7 +21,7 @@ function TotalInactive ({ children, className = '', label }: Props): React.React
     <div className={className}>
       {label || ''}
       <FormatBalance
-        className={inactiveIssuance ? '' : '--placeholder'}
+        className={inactiveIssuance ? '' : '--tmp'}
         value={inactiveIssuance || 1}
         withSi
       />
diff --git a/packages/react-query/src/TotalIssuance.tsx b/packages/react-query/src/TotalIssuance.tsx
index 7e1836b733..ee84d9fe64 100644
--- a/packages/react-query/src/TotalIssuance.tsx
+++ b/packages/react-query/src/TotalIssuance.tsx
@@ -21,7 +21,7 @@ function TotalIssuance ({ children, className = '', label }: Props): React.React
     <div className={className}>
       {label || ''}
       <FormatBalance
-        className={totalIssuance ? '' : '--placeholder'}
+        className={totalIssuance ? '' : '--tmp'}
         value={totalIssuance || 1}
         withSi
       />