prevent replacing placeholder on position details

src/components/EmptyPlaceholder/EmptyPlaceholder.tsx

@@ -26,7 +26,9 @@ export const EmptyPlaceholder: React.FC<IEmptyPlaceholder> = ({
       <Grid className={classNames(classes.blur, 'blurLayer')} />
       <Grid className={classNames(classes.container, 'blurLayer')}>
         <Grid className={classNames(classes.root, 'blurInfo')}>
-          <img className={classes.img} src={icons.empty} alt='Not connected' />
+          <Grid height={104}>
+            <img className={classes.img} src={icons.empty} alt='Not connected' />
+          </Grid>
           <Typography className={classes.desc}>It's empty here...</Typography>
           {desc?.length && <Typography className={classes.desc}>{desc}</Typography>}
           {withButton && (

src/components/NoConnected/NoConnected.tsx

@@ -21,7 +21,9 @@ export const NoConnected: React.FC<INoConnected> = ({ onConnect, title, descCust
       <Grid className={classNames(classes.blur, 'blurLayer')} />
       <Grid className={classNames(classes.container, 'blurLayer')}>
         <Grid className={classNames(classes.root, 'blurInfo')}>
-          <img className={classes.img} src={icons.NoConnected} alt='Not connected' />
+          <Grid height={104}>
+            <img className={classes.img} src={icons.NoConnected} alt='Not connected' />
+          </Grid>
           {!!title && <Typography className={classes.desc}>{title}</Typography>}
 
           {descCustomText?.length && (

src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx

@@ -80,6 +80,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   const [showFeesLoader, setShowFeesLoader] = useState(true)
 
   const [isFinishedDelayRender, setIsFinishedDelayRender] = useState(false)
+  const [isLoadingListDelay, setIsLoadListDelay] = useState(isLoadingList)
 
   const [isClosingPosition, setIsClosingPosition] = useState(false)
 
@@ -392,20 +393,32 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   }
 
   useEffect(() => {
+    if (isFinishedDelayRender) {
+      return
+    }
+    if (walletStatus === Status.Initialized) {
+      setIsFinishedDelayRender(true)
+    }
     const timer = setTimeout(() => {
       setIsFinishedDelayRender(true)
-    }, 1000)
+    }, 1500)
 
     return () => {
       clearTimeout(timer)
     }
   }, [walletStatus])
 
   useEffect(() => {
-    if (isFinishedDelayRender) {
-      setIsFinishedDelayRender(false)
+    if (!isLoadingList) {
+      setTimeout(() => {
+        setIsLoadListDelay(false)
+      }, 300)
+
+      return () => {
+        setIsLoadListDelay(true)
+      }
     }
-  }, [walletStatus])
+  }, [isLoadingList])
 
   const onRefresh = () => {
     if (position) {
@@ -532,7 +545,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
       />
     )
   }
-  if ((isLoadingList && walletStatus === Status.Initialized) || !isFinishedDelayRender) {
+
+  if ((isLoadingListDelay && walletStatus === Status.Initialized) || !isFinishedDelayRender) {
     return (
       <Grid
         container
@@ -542,8 +556,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
         <img src={loader} className={classes.loading} alt='Loading' />
       </Grid>
     )
-  }
-  if (walletStatus !== Status.Initialized) {
+  } else if (walletStatus !== Status.Initialized) {
     return (
       <Grid
         display='flex'
@@ -559,19 +572,19 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
         />
       </Grid>
     )
+  } else {
+    return (
+      <Grid
+        display='flex'
+        position='relative'
+        justifyContent='center'
+        className={classes.fullHeightContainer}>
+        <EmptyPlaceholder
+          desc='The position does not exist in your list! '
+          onAction={() => navigate('/portfolio')}
+          buttonName='Back to positions'
+        />
+      </Grid>
+    )
   }
-
-  return (
-    <Grid
-      display='flex'
-      position='relative'
-      justifyContent='center'
-      className={classes.fullHeightContainer}>
-      <EmptyPlaceholder
-        desc='The position does not exist in your list! '
-        onAction={() => navigate('/portfolio')}
-        buttonName='Back to positions'
-      />
-    </Grid>
-  )
 }