From e3444ae6a9395ff7d2700d962e1f4bbf19998f79 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 12 Jan 2023 13:27:37 +0200
Subject: [PATCH 1/3] Preimage loading status indicator

---
 packages/page-preimages/src/usePreimage.ts    | 38 +++++++++++------
 .../page-referenda/src/Referenda/Submit.tsx   | 11 +++--
 .../react-components/src/Modal/Actions.tsx    |  2 +-
 packages/react-components/src/Modal/Base.tsx  | 42 ++++++++++---------
 .../react-components/src/Modal/Header.tsx     |  6 +++
 5 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/packages/page-preimages/src/usePreimage.ts b/packages/page-preimages/src/usePreimage.ts
index 7385cecea45..a5c4f4ad57f 100644
--- a/packages/page-preimages/src/usePreimage.ts
+++ b/packages/page-preimages/src/usePreimage.ts
@@ -24,6 +24,8 @@ interface InterimResult {
 
 type Result = 'unknown' | 'hash' | 'hashAndLen';
 
+const OPT_STATUS = { withParamsTransform: true };
+
 export function getParamType (api: ApiPromise): Result {
   if ((
     api.query.preimage &&
@@ -96,10 +98,8 @@ function convertDeposit (deposit?: [AccountId, Balance] | null): PreimageDeposit
     : 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 = {
+function createStatus (api: ApiPromise, hash: HexString | Hash, status: PalletPreimageRequestStatus | null = null): PreimageStatus {
+  return {
     count: 0,
     isCompleted: false,
     proposalHash: isString(hash)
@@ -108,6 +108,12 @@ function getBytesParams (api: ApiPromise, hash: Hash | HexString, optStatus: Opt
     registry: api.registry,
     status
   };
+}
+
+function getBytesParams (api: ApiPromise, [[proposalHash], optStatus]: [[HexString], Option<PalletPreimageRequestStatus>]): InterimResult {
+  const isHashParam = getParamType(api) === 'hash';
+  const status = optStatus.unwrapOr(null);
+  const preimageStatus = createStatus(api, proposalHash, status);
 
   if (status) {
     if (status.isRequested) {
@@ -167,26 +173,32 @@ export function getPreimageHash (hashOrBounded: Hash | HexString | FrameSupportP
         : hashOrBounded.toHex();
 }
 
+function getStatusParam (hashOrBounded?: Hash | HexString | FrameSupportPreimagesBounded | null): [HexString] | undefined {
+  const hash = hashOrBounded && getPreimageHash(hashOrBounded);
+
+  return hash && hash.length === 66
+    ? [hash]
+    : undefined;
+}
+
 function usePreimageImpl (hashOrBounded?: Hash | HexString | FrameSupportPreimagesBounded | null): Preimage | undefined {
   const { api } = useApi();
 
   // retrieve the status using only the hash of the image
   const paramsStatus = useMemo(
-    // we need a hash _and_ be on the newest supported version of the pallet
-    // (after the application of bounded calls)
-    () => hashOrBounded
-      ? [getPreimageHash(hashOrBounded)]
-      : undefined,
+    () => getStatusParam(hashOrBounded),
     [hashOrBounded]
   );
 
-  const optStatus = useCall<Option<PalletPreimageRequestStatus>>(paramsStatus && api.query.preimage?.statusFor, paramsStatus);
+  const optStatus = useCall<[[HexString], Option<PalletPreimageRequestStatus>]>(paramsStatus && api.query.preimage?.statusFor, paramsStatus, OPT_STATUS);
 
   // from the retrieved status (if any), get the on-chain stored bytes
   const { paramsBytes, preimageStatus } = useMemo(
-    () => paramsStatus && optStatus
-      ? getBytesParams(api, paramsStatus[0], optStatus)
-      : {},
+    () => optStatus
+      ? getBytesParams(api, optStatus)
+      : paramsStatus
+        ? { preimageStatus: createStatus(api, paramsStatus[0]) }
+        : {},
     [api, optStatus, paramsStatus]
   );
 
diff --git a/packages/page-referenda/src/Referenda/Submit.tsx b/packages/page-referenda/src/Referenda/Submit.tsx
index 613be587709..b5199b30cce 100644
--- a/packages/page-referenda/src/Referenda/Submit.tsx
+++ b/packages/page-referenda/src/Referenda/Submit.tsx
@@ -181,12 +181,14 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
     []
   );
 
+  const isLoadingPreimage = isImageHashValid && (!preimage || !preimage.isCompleted || preimage.proposalHash !== imageHash);
+
   return (
     <>
       {trackOpts && isSubmitOpen && (
         <Modal
           className={className}
-          header={t<string>('Submit proposal')}
+          header={t<string>('Create referendum')}
           onClose={toggleSubmit}
           size='large'
         >
@@ -252,8 +254,9 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
               />
               <InputNumber
                 defaultValue={imageLenDefault}
-                isDisabled={!!preimage?.proposalLength && !preimage?.proposalLength.isZero() && isImageHashValid && isImageLenValid}
+                isDisabled={!isLoadingPreimage && !!preimage?.proposalLength && !preimage?.proposalLength.isZero() && isImageHashValid && isImageLenValid}
                 isError={!isImageLenValid}
+                isLoading={isLoadingPreimage}
                 key='inputLength'
                 label={t<string>('preimage length')}
                 onChange={_onChangeImageLen}
@@ -307,7 +310,7 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
               accountId={accountId}
               icon='plus'
               isDisabled={!selectedOrigin || !isImageHashValid || !isImageLenValid || !accountId || isInvalidAt || !preimage?.proposalHash}
-              label={t<string>('Submit proposal')}
+              label={t<string>('Create referendum')}
               onStart={toggleSubmit}
               params={[
                 selectedOrigin,
@@ -328,7 +331,7 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
       <Button
         icon='plus'
         isDisabled={!isMember || !trackOpts}
-        label={t<string>('Submit proposal')}
+        label={t<string>('Create referendum')}
         onClick={toggleSubmit}
       />
     </>
diff --git a/packages/react-components/src/Modal/Actions.tsx b/packages/react-components/src/Modal/Actions.tsx
index 43f1e9e2bd2..6cece8d5c69 100644
--- a/packages/react-components/src/Modal/Actions.tsx
+++ b/packages/react-components/src/Modal/Actions.tsx
@@ -19,8 +19,8 @@ function Actions ({ children, className = '' }: ActionsProps) {
 }
 
 export default React.memo(styled(Actions)`
-  background-color: var(--bg-input);
   border-radius: 0 0 4px 4px;
+  position: relative;
 
   .ui--Button-Group {
     margin: 1rem 1rem;
diff --git a/packages/react-components/src/Modal/Base.tsx b/packages/react-components/src/Modal/Base.tsx
index 027371c09ed..0c432ae2731 100644
--- a/packages/react-components/src/Modal/Base.tsx
+++ b/packages/react-components/src/Modal/Base.tsx
@@ -37,15 +37,17 @@ function Base (props: ModalProps): React.ReactElement<ModalProps> {
     >
       <DisableGlobalScroll />
       <div
-        className='ui--Modal__overlay'
+        className='ui--Modal__overlay-bg'
         onClick={onClose}
       />
-      <div className='ui--Modal__body'>
-        <Header
-          header={header}
-          onClose={onClose}
-        />
-        {children}
+      <div className='ui--Modal__overlay-body'>
+        <div className='ui--Modal__body'>
+          <Header
+            header={header}
+            onClose={onClose}
+          />
+          {children}
+        </div>
       </div>
     </div>,
     document.body
@@ -68,7 +70,7 @@ export default React.memo(styled(Base)`
   z-index: 1000;
   overflow-y: auto;
 
-  .ui--Modal__overlay {
+  .ui--Modal__overlay-bg {
     position: fixed;
     top: 0;
     left: 0;
@@ -77,24 +79,26 @@ export default React.memo(styled(Base)`
     background: rgba(96, 96, 96, 0.5);
   }
 
-  .ui--Modal__body {
-    margin-top: 30px;
-    background: var(--bg-page);
-    border-radius: 4px;
-    box-shadow: none;
-
+  .ui--Modal__overlay-body {
+    align-items: center;
+    color: var(--color-text);
     display: flex;
     flex-direction: column;
+    font: var(--font-sans);
+    left: 0;
+    padding: 2rem 0;
     position: absolute;
+    right: 0;
     top: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
+  }
 
+  .ui--Modal__body {
+    background: var(--bg-page);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
     max-width: 900px;
     width: calc(100% - 16px);
-
-    color: var(--color-text);
-    font: var(--font-sans);
   }
 
   &.smallSize .ui--Modal__body {
diff --git a/packages/react-components/src/Modal/Header.tsx b/packages/react-components/src/Modal/Header.tsx
index d10d4ffb181..6e1a722fed6 100644
--- a/packages/react-components/src/Modal/Header.tsx
+++ b/packages/react-components/src/Modal/Header.tsx
@@ -15,6 +15,7 @@ function Header ({ className = '', header, onClose }: HeaderProps) {
         <h1>{header}</h1>
       )}
       <Button
+        className='closeModal'
         dataTestId='close-modal'
         icon='times'
         onClick={onClose}
@@ -27,4 +28,9 @@ export default React.memo(styled(Header)`
   display: flex;
   justify-content: space-between;
   padding: 0.75rem 1.5rem 0;
+
+  .closeModal {
+    right: 0;
+    top: 0;
+  }
 `);

From 43a06b14955e76250a583e09ddb936dd3daa43bf Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 12 Jan 2023 15:37:05 +0200
Subject: [PATCH 2/3] Adjust usePreimage status

---
 .../page-preimages/src/Preimages/Preimage.tsx |   2 +-
 packages/page-preimages/src/types.ts          |   3 +-
 packages/page-preimages/src/usePreimage.ts    | 201 +++++++++---------
 3 files changed, 101 insertions(+), 105 deletions(-)

diff --git a/packages/page-preimages/src/Preimages/Preimage.tsx b/packages/page-preimages/src/Preimages/Preimage.tsx
index 705f833c916..f00e0563ba5 100644
--- a/packages/page-preimages/src/Preimages/Preimage.tsx
+++ b/packages/page-preimages/src/Preimages/Preimage.tsx
@@ -33,7 +33,7 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
         {info
           ? (
             <>
-              {info.status && (<div>{info.status?.type}{info.count !== 0 && <>&nbsp;/&nbsp;{formatNumber(info.count)}</>}</div>)}
+              {info.status && (<div>{info.status?.type}{!!info.count && <>&nbsp;/&nbsp;{formatNumber(info.count)}</>}</div>)}
               <Free value={info} />
             </>
           )
diff --git a/packages/page-preimages/src/types.ts b/packages/page-preimages/src/types.ts
index 51f63a54fd9..8ae55821288 100644
--- a/packages/page-preimages/src/types.ts
+++ b/packages/page-preimages/src/types.ts
@@ -14,9 +14,10 @@ export interface PreimageDeposit {
 }
 
 export interface PreimageStatus {
-  count: number;
+  count?: number;
   deposit?: PreimageDeposit;
   isCompleted: boolean;
+  isHashParam: boolean;
   proposalHash: HexString;
   proposalLength?: BN;
   registry: Registry;
diff --git a/packages/page-preimages/src/usePreimage.ts b/packages/page-preimages/src/usePreimage.ts
index a5c4f4ad57f..2f2e50aab3a 100644
--- a/packages/page-preimages/src/usePreimage.ts
+++ b/packages/page-preimages/src/usePreimage.ts
@@ -3,7 +3,7 @@
 
 import type { ApiPromise } from '@polkadot/api';
 import type { Bytes } from '@polkadot/types';
-import type { AccountId, Balance, Call, Hash } from '@polkadot/types/interfaces';
+import type { AccountId, Balance, Hash } from '@polkadot/types/interfaces';
 import type { FrameSupportPreimagesBounded, PalletPreimageRequestStatus } from '@polkadot/types/lookup';
 import type { ITuple } from '@polkadot/types/types';
 import type { HexString } from '@polkadot/util/types';
@@ -18,13 +18,13 @@ import { BN, BN_ZERO, formatNumber, isString, objectSpread } from '@polkadot/uti
 type BytesParams = [[proposalHash: HexString, proposalLength: BN]] | [proposalHash: HexString];
 
 interface InterimResult {
+  interimStatus?: PreimageStatus;
   paramsBytes?: BytesParams;
-  preimageStatus?: PreimageStatus;
 }
 
 type Result = 'unknown' | 'hash' | 'hashAndLen';
 
-const OPT_STATUS = { withParamsTransform: true };
+const OPT_PARAMS = { withParamsTransform: true };
 
 export function getParamType (api: ApiPromise): Result {
   if ((
@@ -46,49 +46,6 @@ export function getParamType (api: ApiPromise): Result {
   return 'unknown';
 }
 
-function createResult (api: ApiPromise, preimageStatus: PreimageStatus, optBytes: Option<Bytes>): Preimage {
-  const bytes = optBytes.unwrapOr(null);
-  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));
-
-      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);
-
-      proposalError = 'Unable to decode preimage bytes into a valid Call';
-    }
-  } else {
-    proposalWarning = 'No preimage bytes found';
-  }
-
-  return objectSpread<Preimage>({}, preimageStatus, {
-    bytes,
-    isCompleted: true,
-    proposal,
-    proposalError,
-    proposalLength: proposalLength || preimageStatus.proposalLength,
-    proposalWarning,
-    registry: api.registry
-  });
-}
-
 function convertDeposit (deposit?: [AccountId, Balance] | null): PreimageDeposit | undefined {
   return deposit
     ? {
@@ -98,22 +55,48 @@ function convertDeposit (deposit?: [AccountId, Balance] | null): PreimageDeposit
     : undefined;
 }
 
-function createStatus (api: ApiPromise, hash: HexString | Hash, status: PalletPreimageRequestStatus | null = null): PreimageStatus {
+export function getPreimageHash (hashOrBounded: Hash | HexString | FrameSupportPreimagesBounded): HexString {
+  if (isString(hashOrBounded)) {
+    return hashOrBounded;
+  }
+
+  const bounded = hashOrBounded as FrameSupportPreimagesBounded;
+
+  return bounded.isInline
+    ? bounded.asInline.hash.toHex()
+    : bounded.isLegacy
+      ? bounded.asLegacy.hash_.toHex()
+      : bounded.isLookup
+        ? bounded.asLookup.hash_.toHex()
+        : hashOrBounded.toHex();
+}
+
+function getParamsStatus (api: ApiPromise, hashOrBounded?: Hash | HexString | FrameSupportPreimagesBounded | null): { initialStatus?: PreimageStatus, paramsStatus?: [HexString] } {
+  if (!hashOrBounded) {
+    return {};
+  }
+
+  const proposalHash = getPreimageHash(hashOrBounded);
+
   return {
-    count: 0,
-    isCompleted: false,
-    proposalHash: isString(hash)
-      ? hash
-      : hash.toHex(),
-    registry: api.registry,
-    status
+    initialStatus: {
+      isCompleted: false,
+      isHashParam: getParamType(api) === 'hash',
+      proposalHash,
+      registry: api.registry,
+      status: null
+    },
+    paramsStatus: [proposalHash]
   };
 }
 
-function getBytesParams (api: ApiPromise, [[proposalHash], optStatus]: [[HexString], Option<PalletPreimageRequestStatus>]): InterimResult {
-  const isHashParam = getParamType(api) === 'hash';
-  const status = optStatus.unwrapOr(null);
-  const preimageStatus = createStatus(api, proposalHash, status);
+function getParamsBytes (initialStatus?: PreimageStatus, optStatus?: [[HexString], Option<PalletPreimageRequestStatus>]): InterimResult {
+  if (!initialStatus || !optStatus || initialStatus.proposalHash !== optStatus[0][0]) {
+    return { interimStatus: initialStatus };
+  }
+
+  const status = optStatus[1].unwrapOr(null);
+  const interimStatus = objectSpread<PreimageStatus>({}, initialStatus, { status });
 
   if (status) {
     if (status.isRequested) {
@@ -125,23 +108,23 @@ function getBytesParams (api: ApiPromise, [[proposalHash], optStatus]: [[HexStri
       } else {
         const { count, deposit, len } = asRequested;
 
-        preimageStatus.count = count.toNumber();
-        preimageStatus.deposit = convertDeposit(deposit.unwrapOr(null));
-        preimageStatus.proposalLength = len.unwrapOr(BN_ZERO);
+        interimStatus.count = count.toNumber();
+        interimStatus.deposit = convertDeposit(deposit.unwrapOr(null));
+        interimStatus.proposalLength = len.unwrapOr(BN_ZERO);
       }
     } else if (status.isUnrequested) {
       const asUnrequested = status.asUnrequested;
 
       if (asUnrequested instanceof Option) {
-        preimageStatus.deposit = convertDeposit(
+        interimStatus.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;
+        interimStatus.deposit = convertDeposit(deposit);
+        interimStatus.proposalLength = len;
       }
     } else {
       // for future reference...
@@ -150,68 +133,80 @@ function getBytesParams (api: ApiPromise, [[proposalHash], optStatus]: [[HexStri
   }
 
   return {
-    paramsBytes: isHashParam
-      ? [preimageStatus.proposalHash]
-      : [[preimageStatus.proposalHash, preimageStatus.proposalLength || BN_ZERO]],
-    preimageStatus
+    interimStatus,
+    paramsBytes: interimStatus.isHashParam
+      ? [interimStatus.proposalHash]
+      : [[interimStatus.proposalHash, interimStatus.proposalLength || BN_ZERO]]
   };
 }
 
-export function getPreimageHash (hashOrBounded: Hash | HexString | FrameSupportPreimagesBounded): HexString {
-  if (isString(hashOrBounded)) {
-    return hashOrBounded;
+function getResult (interimStatus?: PreimageStatus, optBytes?: [BytesParams, Option<Bytes>]): Preimage | undefined {
+  const bytesHash = optBytes
+    ? Array.isArray(optBytes[0][0])
+      ? optBytes[0][0][0]
+      : optBytes[0][0]
+    : undefined;
+
+  if (!interimStatus || !optBytes || interimStatus.proposalHash !== bytesHash) {
+    return interimStatus;
   }
 
-  const bounded = hashOrBounded as FrameSupportPreimagesBounded;
+  const bytes = optBytes[1].unwrapOr(null);
+  const preimageStatus = objectSpread<Preimage>({}, interimStatus, { bytes, isCompleted: true });
 
-  return bounded.isInline
-    ? bounded.asInline.hash.toHex()
-    : bounded.isLegacy
-      ? bounded.asLegacy.hash_.toHex()
-      : bounded.isLookup
-        ? bounded.asLookup.hash_.toHex()
-        : hashOrBounded.toHex();
-}
+  if (bytes) {
+    try {
+      preimageStatus.proposal = preimageStatus.registry.createType('Call', bytes.toU8a(true));
 
-function getStatusParam (hashOrBounded?: Hash | HexString | FrameSupportPreimagesBounded | null): [HexString] | undefined {
-  const hash = hashOrBounded && getPreimageHash(hashOrBounded);
+      const callLength = preimageStatus.proposal.encodedLength;
 
-  return hash && hash.length === 66
-    ? [hash]
-    : undefined;
+      if (preimageStatus.proposalLength) {
+        const storeLength = preimageStatus.proposalLength.toNumber();
+
+        if (callLength !== storeLength) {
+          preimageStatus.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
+        preimageStatus.proposalLength = new BN(callLength);
+      }
+    } catch (error) {
+      console.error(error);
+
+      preimageStatus.proposalError = 'Unable to decode preimage bytes into a valid Call';
+    }
+  } else {
+    preimageStatus.proposalWarning = 'No preimage bytes found';
+  }
+
+  return preimageStatus;
 }
 
 function usePreimageImpl (hashOrBounded?: Hash | HexString | FrameSupportPreimagesBounded | null): Preimage | undefined {
   const { api } = useApi();
 
   // retrieve the status using only the hash of the image
-  const paramsStatus = useMemo(
-    () => getStatusParam(hashOrBounded),
-    [hashOrBounded]
+  const { initialStatus, paramsStatus } = useMemo(
+    // we need a hash _and_ be on the newest supported version of the pallet
+    // (after the application of bounded calls)
+    () => getParamsStatus(api, hashOrBounded),
+    [api, hashOrBounded]
   );
 
-  const optStatus = useCall<[[HexString], Option<PalletPreimageRequestStatus>]>(paramsStatus && api.query.preimage?.statusFor, paramsStatus, OPT_STATUS);
+  const optStatus = useCall<[[HexString], Option<PalletPreimageRequestStatus>]>(paramsStatus && api.query.preimage?.statusFor, paramsStatus, OPT_PARAMS);
 
   // from the retrieved status (if any), get the on-chain stored bytes
-  const { paramsBytes, preimageStatus } = useMemo(
-    () => optStatus
-      ? getBytesParams(api, optStatus)
-      : paramsStatus
-        ? { preimageStatus: createStatus(api, paramsStatus[0]) }
-        : {},
-    [api, optStatus, paramsStatus]
+  const { interimStatus, paramsBytes } = useMemo(
+    () => getParamsBytes(initialStatus, optStatus),
+    [initialStatus, optStatus]
   );
 
-  const optBytes = useCall<Option<Bytes>>(paramsBytes && api.query.preimage?.preimageFor, paramsBytes);
+  const optBytes = useCall<[[HexString], Option<Bytes>]>(paramsBytes && api.query.preimage?.preimageFor, paramsBytes, OPT_PARAMS);
 
   // extract all the preimage info we have retrieved
   return useMemo(
-    () => preimageStatus
-      ? optBytes
-        ? createResult(api, preimageStatus, optBytes)
-        : preimageStatus
-      : undefined,
-    [api, optBytes, preimageStatus]
+    () => getResult(interimStatus, optBytes),
+    [interimStatus, optBytes]
   );
 }
 

From b3a4c4902db7c2c89b6458932ea98b50aa599bd3 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Fri, 13 Jan 2023 10:53:53 +0200
Subject: [PATCH 3/3] Reset on reload

---
 packages/page-referenda/src/Referenda/Submit.tsx | 6 ++++++
 packages/react-components/src/VoteValue.tsx      | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/page-referenda/src/Referenda/Submit.tsx b/packages/page-referenda/src/Referenda/Submit.tsx
index b5199b30cce..974b40924e5 100644
--- a/packages/page-referenda/src/Referenda/Submit.tsx
+++ b/packages/page-referenda/src/Referenda/Submit.tsx
@@ -92,6 +92,12 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
       imageLenDefault: preimage.proposalLength,
       isImageLenValid: prev.isImageLenValid
     }));
+
+    preimage && !preimage.isCompleted && setImageLen({
+      imageLen: BN_ZERO,
+      imageLenDefault: BN_ZERO,
+      isImageLenValid: false
+    });
   }, [preimage]);
 
   const trackInfo = useMemo(
diff --git a/packages/react-components/src/VoteValue.tsx b/packages/react-components/src/VoteValue.tsx
index 18468c7f24f..685f89dbd1b 100644
--- a/packages/react-components/src/VoteValue.tsx
+++ b/packages/react-components/src/VoteValue.tsx
@@ -111,17 +111,17 @@ function VoteValue ({ accountId, autoFocus, label, noDefault, onChange }: Props)
     [accountId]
   );
 
-  const isDisabled = accountId !== selectedId;
+  const isLoading = accountId !== selectedId;
 
   return (
     <InputBalance
       autoFocus={autoFocus}
       defaultValue={
-        isDisabled
+        isLoading
           ? undefined
           : defaultValue
       }
-      isDisabled={isDisabled}
+      isLoading={isLoading}
       isZeroable
       label={label || t<string>('vote value')}
       labelExtra={