fix(ui): improve transitions in pay flow

app/components/Pay/Pay.js

@@ -30,7 +30,7 @@ const ShowHidePayReq = Keyframes.Spring({
   small: { height: 48 },
   big: async (next, cancel, ownProps) => {
     ownProps.context.focusPayReqInput()
-    await next({ height: 130 })
+    await next({ height: 130, immediate: true })
   }
 })
 
@@ -369,7 +369,7 @@ class Pay extends React.Component {
           show &&
           (styles => (
             <animated.div style={styles}>
-              <Box mb={5}>
+              <Box mb={4}>
                 <Text textAlign="justify">
                   <FormattedMessage {...messages.description} />
                 </Text>
@@ -530,11 +530,6 @@ class Pay extends React.Component {
       setCryptoCurrency
     } = this.props
 
-    // Do not render unless we are on the summary step.
-    if (currentStep !== 'summary') {
-      return null
-    }
-
     const formState = this.formApi.getState()
     let minFee, maxFee
     if (routes.length) {
@@ -542,41 +537,56 @@ class Pay extends React.Component {
       maxFee = getMaxFee(routes)
     }
 
-    // convert entered amount to satoshis
+    const render = () => {
-    if (isOnchain) {
+      // convert entered amount to satoshis
-      const amountInSatoshis = convert(cryptoCurrency, 'sats', formState.values.amountCrypto)
+      if (isOnchain) {
-      return (
+        const amountInSatoshis = convert(cryptoCurrency, 'sats', formState.values.amountCrypto)
-        <PaySummaryOnChain
+        return (
-          amount={amountInSatoshis}
+          <PaySummaryOnChain
-          address={formState.values.payReq}
+            amount={amountInSatoshis}
-          cryptoCurrency={cryptoCurrency}
+            address={formState.values.payReq}
-          cryptoCurrencyTicker={cryptoCurrencyTicker}
+            cryptoCurrency={cryptoCurrency}
-          cryptoCurrencies={cryptoCurrencies}
+            cryptoCurrencyTicker={cryptoCurrencyTicker}
-          currentTicker={currentTicker}
+            cryptoCurrencies={cryptoCurrencies}
-          setCryptoCurrency={setCryptoCurrency}
+            currentTicker={currentTicker}
-          fiatCurrency={fiatCurrency}
+            setCryptoCurrency={setCryptoCurrency}
-          isQueryingFees={isQueryingFees}
+            fiatCurrency={fiatCurrency}
-          onchainFees={onchainFees}
+            isQueryingFees={isQueryingFees}
-          queryFees={queryFees}
+            onchainFees={onchainFees}
-        />
+            queryFees={queryFees}
-      )
+          />
-    } else if (isLn) {
+        )
-      return (
+      } else if (isLn) {
-        <PaySummaryLightning
+        return (
-          currentTicker={currentTicker}
+          <PaySummaryLightning
-          cryptoCurrency={cryptoCurrency}
+            currentTicker={currentTicker}
-          cryptoCurrencyTicker={cryptoCurrencyTicker}
+            cryptoCurrency={cryptoCurrency}
-          cryptoCurrencies={cryptoCurrencies}
+            cryptoCurrencyTicker={cryptoCurrencyTicker}
-          fiatCurrency={fiatCurrency}
+            cryptoCurrencies={cryptoCurrencies}
-          isQueryingRoutes={isQueryingRoutes}
+            fiatCurrency={fiatCurrency}
-          minFee={minFee}
+            isQueryingRoutes={isQueryingRoutes}
-          maxFee={maxFee}
+            minFee={minFee}
-          nodes={nodes}
+            maxFee={maxFee}
-          payReq={formState.values.payReq}
+            nodes={nodes}
-          setCryptoCurrency={setCryptoCurrency}
+            payReq={formState.values.payReq}
-        />
+            setCryptoCurrency={setCryptoCurrency}
-      )
+          />
+        )
+      }
     }
+
+    return (
+      <Transition
+        native
+        items={currentStep === 'summary'}
+        from={{ opacity: 0, height: 0 }}
+        enter={{ opacity: 1, height: 'auto' }}
+        leave={{ opacity: 0, height: 0 }}
+        initial={{ opacity: 1, height: 'auto' }}
+      >
+        {show => show && (styles => <animated.div style={styles}>{render()}</animated.div>)}
+      </Transition>
+    )
   }
 
   /**
@@ -670,10 +680,16 @@ class Pay extends React.Component {
               </Flex>
 
               <Box as="section" css={{ flex: 1 }} mb={3}>
-                {this.renderHelpText()}
+                <Box width={1} css={{ position: 'relative' }}>
-                {this.renderAddressField()}
+                  {this.renderHelpText()}
-                {this.renderAmountFields()}
+                  <Box width={1} css={{ position: 'absolute' }}>
-                {this.renderSummary()}
+                    {this.renderAddressField()}
+                    {this.renderAmountFields()}
+                  </Box>
+                  <Box width={1} css={{ position: 'absolute' }}>
+                    {this.renderSummary()}
+                  </Box>
+                </Box>
               </Box>
 
               <Box as="footer" mt="auto">