From 54d709a308a98f6cf741340138906b5243e42249 Mon Sep 17 00:00:00 2001
From: memoyil <2213635+memoyil@users.noreply.github.com>
Date: Fri, 3 Jan 2025 21:52:43 +0300
Subject: [PATCH] fix: No active position shown when loading lp positions
 (#11083)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If user only has the positions in either of them (v3,v2,stable), no
active position for a period of time shown if the type where there is no
position loaded first

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the loading state management in the `PositionPage`
component by checking loading flags before rendering the empty state and
modifies how loading indicators are displayed.

### Detailed summary
- Updated the condition to check for loading states (`v3Loading`,
`v2Loading`, `stableLoading`) before rendering the empty state.
- Introduced a loading skeleton (`<PositionItemSkeleton />`) and a
loading text indicator when any of the position lists are loading.
- Stored the reduced elements in a constant `elements` for better
readability.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->
---
 .../src/views/universalFarms/PositionPage.tsx | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/views/universalFarms/PositionPage.tsx b/apps/web/src/views/universalFarms/PositionPage.tsx
index ceda57b58279c..66882742caebb 100644
--- a/apps/web/src/views/universalFarms/PositionPage.tsx
+++ b/apps/web/src/views/universalFarms/PositionPage.tsx
@@ -412,7 +412,14 @@ export const PositionPage = () => {
       )
     }
 
-    if (!v3PositionList.length && !v2PositionList.length && !stablePositionList.length) {
+    if (
+      !v3Loading &&
+      !v2Loading &&
+      !stableLoading &&
+      !v3PositionList.length &&
+      !v2PositionList.length &&
+      !stablePositionList.length
+    ) {
       return (
         <EmptyListPlaceholder
           text={t('You have no %status% position in this wallet.', {
@@ -435,7 +442,19 @@ export const PositionPage = () => {
       [Protocol.V2]: v2PositionList,
       [Protocol.STABLE]: stablePositionList,
     }
-    return selectedPoolTypes.reduce((acc, type) => acc.concat(sectionMap[type]), []).slice(0, cursorVisible)
+    const elements = selectedPoolTypes.reduce((acc, type) => acc.concat(sectionMap[type]), []).slice(0, cursorVisible)
+    if (v3Loading || v2Loading || stableLoading) {
+      return [
+        ...elements,
+        <>
+          <PositionItemSkeleton />
+          <Text color="textSubtle" textAlign="center">
+            <Dots>{t('Loading')}</Dots>
+          </Text>
+        </>,
+      ]
+    }
+    return elements
   }, [
     account,
     t,