diff --git a/src/components/MainView.js b/src/components/MainView.js
index bc2db9d..ea03985 100644
--- a/src/components/MainView.js
+++ b/src/components/MainView.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from 'react'
 import { animated, useTransition } from 'react-spring'
 import { GU, useTheme, useViewport } from '@aragon/ui'
@@ -30,7 +29,6 @@ function MainView({ children }) {
             position: relative;
             z-index: 1;
             width: 100%;
-            min-height: 100vh;
             background: ${theme.background};
           `}
         >
@@ -47,7 +45,6 @@ function MainView({ children }) {
             <div
               css={`
                 min-height: 100vh;
-                height: 100%;
               `}
             >
               <Layout>{children}</Layout>
diff --git a/src/components/ProposalsView.js b/src/components/ProposalsView.js
index cc7ea5f..4bed2c0 100644
--- a/src/components/ProposalsView.js
+++ b/src/components/ProposalsView.js
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
+import { useTransition, animated } from 'react-spring'
 import styled from 'styled-components'
 import { useViewport } from 'use-viewport'
 import {
@@ -13,9 +14,13 @@ import {
   GU,
   RADIUS,
 } from '@aragon/ui'
+
 import { ConvictionBar } from './ConvictionVisuals'
 import IdentityBadge from './IdentityBadge'
 import { Amount } from '../screens/ProposalDetail'
+
+import { useAppState } from '../providers/AppState'
+
 import { ZERO_ADDR } from '../constants'
 
 const PROPOSALS_PER_PAGE = 10
@@ -25,9 +30,21 @@ function ProposalsView({ proposals, requestToken }) {
   const theme = useTheme()
   const history = useHistory()
   const { below } = useViewport()
+  const { isLoading } = useAppState()
 
   const compactMode = below(1400)
 
+  const loadingSwapTransitions = useTransition(isLoading, null, {
+    config: { mass: 1, tension: 200, friction: 20 },
+    from: { opacity: 0, transform: `translate3d(0, ${0.5 * GU}px, 0)` },
+    enter: { opacity: 1, transform: `translate3d(0, 0, 0)` },
+    leave: {
+      opacity: 0,
+      position: 'absolute',
+      transform: `translate3d(0, -${0.5 * GU}px, 0)`,
+    },
+  })
+
   const handleSelectProposal = useCallback(
     id => {
       history.push(`/proposal/${id}`)
@@ -51,98 +68,109 @@ function ProposalsView({ proposals, requestToken }) {
   return (
     <div
       css={`
+        position: relative;
         width: 100%;
       `}
     >
-      {shownProposals.map(proposal => (
-        <ProposalCard
-          key={proposal.id}
-          background={theme.surface}
-          onClick={() => handleSelectProposal(proposal.id)}
-          focusRingRadius={RADIUS}
-          css={`
-            text-align: left;
-            word-wrap: break-word;
-            text-overflow: ellipsis;
-          `}
-        >
-          <div
-            css={`
-              width: 100%;
-              display: grid;
-              grid-template-columns: 1fr 1fr 1fr;
-              grid-template-rows: 1fr;
-              justify-items: start;
-              ${compactMode &&
-                `
+      {loadingSwapTransitions.map(
+        ({ item: loading, key, props }) =>
+          !loading && (
+            <animated.div style={props} key={key}>
+              {shownProposals.map(proposal => (
+                <ProposalCard
+                  key={proposal.id}
+                  background={theme.surface}
+                  onClick={() => handleSelectProposal(proposal.id)}
+                  focusRingRadius={RADIUS}
+                  css={`
+                    text-align: left;
+                    word-wrap: break-word;
+                    text-overflow: ellipsis;
+                  `}
+                >
+                  <div
+                    css={`
+                      width: 100%;
+                      display: grid;
+                      grid-template-columns: 1fr 1fr 1fr;
+                      grid-template-rows: 1fr;
+                      justify-items: start;
+                      ${compactMode &&
+                        `
                 display: flex;
                 flex-direction: column;
               `}
-            `}
-          >
-            <ProposalProperty
-              title="Proposal Title"
-              css={`
-                grid-column-start: 0;
-                margin-top: ${2 * GU}px;
-              `}
-            >
-              <ProposalTitleLink
-                handleSelectProposal={handleSelectProposal}
-                title={proposal.name}
-                id={proposal.id}
-              />
-            </ProposalProperty>
-            {proposal.beneficiary === ZERO_ADDR ? (
-              <SignalingIndicator />
-            ) : (
-              <Amount
-                requestedAmount={proposal.requestedAmount}
-                requestToken={requestToken}
-                hasTopSpacing={compactMode}
-              />
-            )}
-            <div
-              css={`
-                display: flex;
-                ${!compactMode && `margin-left: ${10 * GU}px;`}
-              `}
-            >
-              {proposal.status.toLowerCase() === 'executed' ? (
-                <ExecutedIndicator />
-              ) : proposal.status.toLowerCase() !== 'cancelled' ? (
-                <ProposalProperty title="Submitted by">
-                  <p
+                    `}
+                  >
+                    <ProposalProperty
+                      title="Proposal Title"
+                      css={`
+                        grid-column-start: 0;
+                        margin-top: ${2 * GU}px;
+                      `}
+                    >
+                      <ProposalTitleLink
+                        handleSelectProposal={handleSelectProposal}
+                        title={proposal.name}
+                        id={proposal.id}
+                      />
+                    </ProposalProperty>
+                    {proposal.beneficiary === ZERO_ADDR ? (
+                      <SignalingIndicator />
+                    ) : (
+                      <Amount
+                        requestedAmount={proposal.requestedAmount}
+                        requestToken={requestToken}
+                        hasTopSpacing={compactMode}
+                      />
+                    )}
+                    <div
+                      css={`
+                        display: flex;
+                        ${!compactMode && `margin-left: ${10 * GU}px;`}
+                      `}
+                    >
+                      {proposal.status.toLowerCase() === 'executed' ? (
+                        <ExecutedIndicator />
+                      ) : proposal.status.toLowerCase() !== 'cancelled' ? (
+                        <ProposalProperty title="Submitted by">
+                          <p
+                            css={`
+                              ${textStyle('body2')}
+                            `}
+                          >
+                            <IdentityBadge
+                              entity={proposal.creator}
+                              badgeOnly
+                            />
+                          </p>
+                        </ProposalProperty>
+                      ) : (
+                        <CancelledIndicator />
+                      )}
+                    </div>
+                  </div>
+                  <h2
                     css={`
-                      ${textStyle('body2')}
+                      ${textStyle('body4')}
+                      text-transform: uppercase;
+                      color: ${theme.contentSecondary};
+                      margin-top: ${4 * GU}px;
+                      margin-bottom: ${1 * GU}px;
                     `}
                   >
-                    <IdentityBadge entity={proposal.creator} badgeOnly />
-                  </p>
-                </ProposalProperty>
-              ) : (
-                <CancelledIndicator />
-              )}
-            </div>
-          </div>
-          <h2
-            css={`
-              ${textStyle('body4')}
-              text-transform: uppercase;
-              color: ${theme.contentSecondary};
-              margin-top: ${4 * GU}px;
-              margin-bottom: ${1 * GU}px;
-            `}
-          >
-            Conviction Progress
-          </h2>
-          <ConvictionBar
-            hideSeparator={proposal.beneficiary === ZERO_ADDR}
-            proposal={proposal}
-            withThreshold={proposal.status !== 'Cancelled'}
-          />
-        </ProposalCard>
-      ))}
+                    Conviction Progress
+                  </h2>
+                  <ConvictionBar
+                    hideSeparator={proposal.beneficiary === ZERO_ADDR}
+                    proposal={proposal}
+                    withThreshold={proposal.status !== 'Cancelled'}
+                  />
+                </ProposalCard>
+              ))}
+            </animated.div>
+          )
+      )}
       <Pagination pages={pages} selected={page} onChange={setPage} />
     </div>
   )
diff --git a/src/components/ScrollTop.js b/src/components/ScrollTop.js
index e4970ca..dcc447d 100644
--- a/src/components/ScrollTop.js
+++ b/src/components/ScrollTop.js
@@ -5,8 +5,7 @@ export default function ScrollToTop() {
   const { pathname } = useLocation()
 
   useEffect(() => {
-    document.querySelector('body').scrollY = 0
-    window.scrollY = 0
+    window.scrollTo(0, 0)
   }, [pathname])
 
   return null
diff --git a/src/screens/ProposalDetail.js b/src/screens/ProposalDetail.js
index 40d8fa9..659ecb8 100644
--- a/src/screens/ProposalDetail.js
+++ b/src/screens/ProposalDetail.js
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react'
+import { useTransition, animated } from 'react-spring'
 import { useViewport } from 'use-viewport'
 import {
   BackButton,
@@ -78,6 +79,16 @@ function ProposalDetail({
   const { below } = useViewport()
 
   const compactMode = below(1400)
+  const loadingSwapTransitions = useTransition(proposal, null, {
+    config: { mass: 1, tension: 200, friction: 20 },
+    from: { opacity: 0, transform: `translate3d(0, ${0.5 * GU}px, 0)` },
+    enter: { opacity: 1, transform: `translate3d(0, 0, 0)` },
+    leave: {
+      opacity: 0,
+      position: 'absolute',
+      transform: `translate3d(0, -${0.5 * GU}px, 0)`,
+    },
+  })
 
   const {
     currentConviction,
@@ -143,7 +154,11 @@ function ProposalDetail({
   const signalingProposal = addressesEqual(beneficiary, ZERO_ADDR)
 
   return (
-    <div>
+    <div
+      css={`
+        position: relative;
+      `}
+    >
       <Bar
         css={`
           margin-top: ${4 * GU}px;
@@ -151,160 +166,175 @@ function ProposalDetail({
       >
         <BackButton onClick={onBack} />
       </Bar>
-      <Box>
-        <section
-          css={`
-            display: flex;
-            flex-direction: column;
-            flex-wrap: wrap;
-          `}
-        >
-          <div
-            css={`
-              display: flex;
-              flex-wrap: wrap;
-              ${compactMode &&
-                `
+      {loadingSwapTransitions.map(
+        ({ item: loading, key, props }) =>
+          loading && (
+            <animated.div style={props} key={key}>
+              <Box>
+                <section
+                  css={`
+                    display: flex;
+                    flex-direction: column;
+                    flex-wrap: wrap;
+                  `}
+                >
+                  <div
+                    css={`
+                      display: flex;
+                      flex-wrap: wrap;
+                      ${compactMode &&
+                        `
                   flex-direction: column-reverse;
                 `}
-            `}
-          >
-            <h2
-              css={`
-                ${textStyle('title2')};
-              `}
-            >
-              {name}
-            </h2>
-            <div css="flex-grow: 1;" />
-            {!signalingProposal && status.toLowerCase() !== 'cancelled' && (
-              <Outcome
-                result={outcomeText}
-                positive={proposalState !== UNABLE_TO_PASS}
-              />
-            )}
-          </div>
-          {!signalingProposal && proposalState !== EXECUTED && (
-            <p
-              css={`
+                    `}
+                  >
+                    <h2
+                      css={`
+                        ${textStyle('title2')};
+                      `}
+                    >
+                      {name}
+                    </h2>
+                    <div css="flex-grow: 1;" />
+                    {!signalingProposal &&
+                      status.toLowerCase() !== 'cancelled' && (
+                        <Outcome
+                          result={outcomeText}
+                          positive={proposalState !== UNABLE_TO_PASS}
+                        />
+                      )}
+                  </div>
+                  {!signalingProposal && proposalState !== EXECUTED && (
+                    <p
+                      css={`
                   margin-top: ${1 * GU}px;
                   ${textStyle('body2')}
                   color: ${theme.contentSecondary};
                 `}
-            >
-              This proposal{' '}
-              {status.toLowerCase() === 'cancelled' ||
-              status.toLowerCase() === 'executed'
-                ? 'was'
-                : 'is'}{' '}
-              requesting{' '}
-              {formatTokenAmount(requestedAmount, requestToken.decimals)} ANT
-              out of {formatTokenAmount(vaultBalance, requestToken.decimals)}{' '}
-              ANT currently in the common pool.
-            </p>
-          )}
-          <div
-            css={`
-              margin-top: ${4 * GU}px;
-              margin-bottom: ${4 * GU}px;
-              display: flex;
-              flex-wrap: wrap;
-              justify-content: space-between;
-              ${compactMode &&
-                `
+                    >
+                      This proposal{' '}
+                      {status.toLowerCase() === 'cancelled' ||
+                      status.toLowerCase() === 'executed'
+                        ? 'was'
+                        : 'is'}{' '}
+                      requesting{' '}
+                      {formatTokenAmount(
+                        requestedAmount,
+                        requestToken.decimals
+                      )}{' '}
+                      ANT out of{' '}
+                      {formatTokenAmount(vaultBalance, requestToken.decimals)}{' '}
+                      ANT currently in the common pool.
+                    </p>
+                  )}
+                  <div
+                    css={`
+                      margin-top: ${4 * GU}px;
+                      margin-bottom: ${4 * GU}px;
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: space-between;
+                      ${compactMode &&
+                        `
                   flex-direction: column;
               `}
-            `}
-          >
-            {beneficiary === ZERO_ADDR && <SignalingIndicator />}{' '}
-            {status !== 'Cancelled' ? (
-              requestToken && (
-                <Amount
-                  requestedAmount={requestedAmount}
-                  requestToken={requestToken}
-                />
-              )
-            ) : (
-              <CancelledIndicator />
-            )}
-            <DataField
-              label="Submitted By"
-              value={
-                <IdentityBadge
-                  connectedAccount={addressesEqual(creator, connectedAccount)}
-                  entity={creator}
-                />
-              }
-            />
-            {requestToken && !signalingProposal && (
-              <DataField
-                label="Beneficiary"
-                value={
-                  <IdentityBadge
-                    connectedAccount={addressesEqual(
-                      beneficiary,
-                      connectedAccount
-                    )}
-                    entity={beneficiary}
-                  />
-                }
-              />
-            )}
-            {!signalingProposal &&
-              proposalState !== UNABLE_TO_PASS &&
-              proposalState !== EXECUTED && (
-                <div
-                  css={`
-                    ${compactMode && `margin-top: ${2 * GU}px;`}
-                  `}
-                >
-                  <ConvictionCountdown proposal={proposal} />
-                </div>
-              )}
-            <DataField
-              label="Link"
-              value={
-                link ? (
-                  <Link href={link} external>
-                    Read more
-                  </Link>
-                ) : (
-                  <span
-                    css={`
-                      ${textStyle('body2')};
                     `}
                   >
-                    No link provided
-                  </span>
-                )
-              }
-            />
-          </div>
-          {status.toLowerCase() !== 'executed' && (
-            <>
-              <DataField
-                label="Conviction Progress"
-                value={
-                  <ConvictionBar
+                    {beneficiary === ZERO_ADDR && <SignalingIndicator />}{' '}
+                    {status !== 'Cancelled' ? (
+                      requestToken && (
+                        <Amount
+                          requestedAmount={requestedAmount}
+                          requestToken={requestToken}
+                        />
+                      )
+                    ) : (
+                      <CancelledIndicator />
+                    )}
+                    <DataField
+                      label="Submitted By"
+                      value={
+                        <IdentityBadge
+                          connectedAccount={addressesEqual(
+                            creator,
+                            connectedAccount
+                          )}
+                          entity={creator}
+                        />
+                      }
+                    />
+                    {requestToken && !signalingProposal && (
+                      <DataField
+                        label="Beneficiary"
+                        value={
+                          <IdentityBadge
+                            connectedAccount={addressesEqual(
+                              beneficiary,
+                              connectedAccount
+                            )}
+                            entity={beneficiary}
+                          />
+                        }
+                      />
+                    )}
+                    {!signalingProposal &&
+                      proposalState !== UNABLE_TO_PASS &&
+                      proposalState !== EXECUTED && (
+                        <div
+                          css={`
+                            ${compactMode && `margin-top: ${2 * GU}px;`}
+                          `}
+                        >
+                          <ConvictionCountdown proposal={proposal} />
+                        </div>
+                      )}
+                    <DataField
+                      label="Link"
+                      value={
+                        link ? (
+                          <Link href={link} external>
+                            Read more
+                          </Link>
+                        ) : (
+                          <span
+                            css={`
+                              ${textStyle('body2')};
+                            `}
+                          >
+                            No link provided
+                          </span>
+                        )
+                      }
+                    />
+                  </div>
+                  {status.toLowerCase() !== 'executed' && (
+                    <>
+                      <DataField
+                        label="Conviction Progress"
+                        value={
+                          <ConvictionBar
+                            proposal={proposal}
+                            withThreshold={!!requestToken}
+                            hideSeparator={proposal.beneficiary === ZERO_ADDR}
+                          />
+                        }
+                      />
+                    </>
+                  )}
+                  <ProposalActions
+                    hasCancelRole={hasCancelRole}
+                    myStakes={myStakes}
                     proposal={proposal}
-                    withThreshold={!!requestToken}
-                    hideSeparator={proposal.beneficiary === ZERO_ADDR}
+                    onCancelProposal={handleCancelProposal}
+                    onExecuteProposal={onExecuteProposal}
+                    onStakeToProposal={onStakeToProposal}
+                    onWithdrawFromProposal={onWithdrawFromProposal}
                   />
-                }
-              />
-            </>
-          )}
-          <ProposalActions
-            hasCancelRole={hasCancelRole}
-            myStakes={myStakes}
-            proposal={proposal}
-            onCancelProposal={handleCancelProposal}
-            onExecuteProposal={onExecuteProposal}
-            onStakeToProposal={onStakeToProposal}
-            onWithdrawFromProposal={onWithdrawFromProposal}
-          />
-        </section>
-      </Box>
+                </section>
+              </Box>
+            </animated.div>
+          )
+      )}
       <SidePanel
         title="Support this proposal"
         opened={panelState.visible}