refactor(predictions): Mobile pages hidden instead of unmounted (panc…

…akeswap#1027) * refactor(predictions): Mobile pages hidden instead of unmounted * chore: Bump UI Kit
taalswap · Apr 29, 2021 · 19f0c66 · 19f0c66
1 parent 3dfc2e4
commit 19f0c66
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "@binance-chain/bsc-connector": "^1.0.0",
     "@crowdin/crowdin-api-client": "^1.10.4",
     "@ethersproject/abi": "^5.0.7",
-    "@pancakeswap-libs/uikit": "^0.29.0",
+    "@pancakeswap-libs/uikit": "^0.29.1",
     "@reduxjs/toolkit": "^1.5.0",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",

diff --git a/src/views/Predictions/Mobile.tsx b/src/views/Predictions/Mobile.tsx
@@ -26,6 +26,15 @@ const StyledMobile = styled.div`
   }
 `
 
+const View = styled.div<{ isVisible: boolean }>`
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
+`
+
 const getView = (isHistoryPaneOpen: boolean, isChartPaneOpen: boolean): PageView => {
   if (isHistoryPaneOpen) {
     return PageView.HISTORY
@@ -46,16 +55,20 @@ const Mobile: React.FC = () => {
 
   return (
     <StyledMobile>
-      <Box height="100%" overflow="hidden">
-        {view === PageView.POSITIONS && (
+      <Box height="100%" overflow="hidden" position="relative">
+        <View isVisible={view === PageView.POSITIONS}>
           <Flex alignItems="center" height="100%">
             {status === PredictionStatus.ERROR && <ErrorNotification />}
             {status === PredictionStatus.PAUSED && <PauseNotification />}
             {status === PredictionStatus.LIVE && <Positions />}
           </Flex>
-        )}
-        {view === PageView.CHART && <Chart />}
-        {view === PageView.HISTORY && <History />}
+        </View>
+        <View isVisible={view === PageView.CHART}>
+          <Chart />
+        </View>
+        <View isVisible={view === PageView.HISTORY}>
+          <History />
+        </View>
       </Box>
       <MobileMenu />
     </StyledMobile>

diff --git a/yarn.lock b/yarn.lock
@@ -2017,10 +2017,10 @@
     eslint-plugin-react "^7.21.5"
     eslint-plugin-react-hooks "^4.0.0"
 
-"@pancakeswap-libs/uikit@^0.29.0":
-  version "0.29.0"
-  resolved "https://registry.yarnpkg.com/@pancakeswap-libs/uikit/-/uikit-0.29.0.tgz#b9e533081b16d19ad958f9d52df6289de2fdc1bf"
-  integrity sha512-VWSnXO4UzY2IPYa9pZFJbjoP4TDQxIfHFqvRqhse5cd2neFODD4obNJGqu1gqR8Tnuu/AEjISSzEyW7GFoBHuQ==
+"@pancakeswap-libs/uikit@^0.29.1":
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/@pancakeswap-libs/uikit/-/uikit-0.29.1.tgz#0b96d3456df39d9727d4201547c8e1bae47c3cf3"
+  integrity sha512-pQvBK+UXfiAWmpLKPIPcu9ISF5PrYLwJZndNKbjyW9+HoO5e9szhjewzTKFlfmR1G5imhZvrd9ebwiJEgZyZ2w==
   dependencies:
     "@popperjs/core" "^2.9.2"
     "@types/lodash" "^4.14.168"