From b829d367c0c53e6fa23e673125583964650df5a4 Mon Sep 17 00:00:00 2001
From: Abhishek-17H <abhishekhegaje1702@gmail.com>
Date: Sun, 19 Jan 2025 19:20:29 +0530
Subject: [PATCH] Order tab to remain rendered after the initial load

---
 packages/volto/news/6492.bugfix                    |  2 +-
 .../src/components/manage/Sidebar/Sidebar.jsx      | 14 ++++++++------
 .../theme/themes/pastanaga/extras/sidebar.less     |  5 +++++
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/volto/news/6492.bugfix b/packages/volto/news/6492.bugfix
index 22349d1990..42c9bff724 100644
--- a/packages/volto/news/6492.bugfix
+++ b/packages/volto/news/6492.bugfix
@@ -1 +1 @@
-You can now render the order side panel only when the 'Order' tab is active. Previously, the panel would render unnecessarily even when not active.@Abhishek-17h
\ No newline at end of file
+The Order side panel now renders only when the "Order" tab is active. Previously, the panel would render unnecessarily even when inactive. @Abhishek-17h
\ No newline at end of file
diff --git a/packages/volto/src/components/manage/Sidebar/Sidebar.jsx b/packages/volto/src/components/manage/Sidebar/Sidebar.jsx
index 776a9ebb3a..a2fc7cb13c 100644
--- a/packages/volto/src/components/manage/Sidebar/Sidebar.jsx
+++ b/packages/volto/src/components/manage/Sidebar/Sidebar.jsx
@@ -10,6 +10,7 @@ import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { getCookieOptions } from '@plone/volto/helpers/Cookies/cookies';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import forbiddenSVG from '@plone/volto/icons/forbidden.svg';
+import loaderSVG from '@plone/volto/icons/loader.svg';
 import { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar';
 import expandSVG from '@plone/volto/icons/left-key.svg';
 import collapseSVG from '@plone/volto/icons/right-key.svg';
@@ -57,6 +58,7 @@ const Sidebar = (props) => {
   );
   const [size] = useState(0);
   const [showFull, setshowFull] = useState(true);
+  const [isOrderTabRendered, setIsOrderTabRendered] = useState(false);
 
   const tab = useSelector((state) => state.sidebar.tab);
   const toolbarExpanded = useSelector((state) => state.toolbar.expanded);
@@ -101,6 +103,10 @@ const Sidebar = (props) => {
   const onTabChange = (event, data) => {
     event.nativeEvent.stopImmediatePropagation();
     dispatch(setSidebarTab(data.activeIndex));
+
+    if (data.activeIndex === 2) {
+      setIsOrderTabRendered(true);
+    }
   };
 
   return (
@@ -187,17 +193,13 @@ const Sidebar = (props) => {
             !!orderTab && {
               menuItem: intl.formatMessage(messages.order),
               pane:
-                tab === 2 ? (
+                isOrderTabRendered || tab === 2 ? (
                   <Tab.Pane
                     key="order"
                     className="tab-wrapper"
                     id="sidebar-order"
                   >
-                    <Icon
-                      className="tab-forbidden"
-                      name={forbiddenSVG}
-                      size="48px"
-                    />
+                    <Icon className="tab-loader" name={loaderSVG} size="60px" />
                   </Tab.Pane>
                 ) : null,
             },
diff --git a/packages/volto/theme/themes/pastanaga/extras/sidebar.less b/packages/volto/theme/themes/pastanaga/extras/sidebar.less
index 5931049d89..8e2674a702 100644
--- a/packages/volto/theme/themes/pastanaga/extras/sidebar.less
+++ b/packages/volto/theme/themes/pastanaga/extras/sidebar.less
@@ -213,6 +213,11 @@
     color: #bac5c7;
   }
 
+  .tab-loader {
+    margin: calc(50% - 24px) auto;
+    color: #bac5c7;
+  }
+
   header {
     display: flex;
     height: 60px;