@rpg-engine/long-bow 0.8.148 → 0.8.150

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.148",
+  "version": "0.8.150",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Marketplace/BuyOrderDetailsModal.tsx

@@ -117,11 +117,11 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
             </FieldRow>
 
             <FieldRow>
-              <Label>Max Gold</Label>
+              <Label>Gold Offer</Label>
               <StyledInput
                 value={maxPrice || ''}
                 onChange={(e) => onMaxPriceChange(Number(e.target.value))}
-                placeholder="Max gold"
+                placeholder="Gold offer"
                 type="number"
                 min={1}
                 onFocus={disableHotkeys}

package/src/components/Marketplace/BuyPanel.tsx

@@ -8,7 +8,7 @@ import {
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { AiFillCaretRight } from 'react-icons/ai';
 import { SortVertical } from 'pixelarticons/react/SortVertical';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { ConfirmModal } from '../ConfirmModal';
 import { Dropdown } from '../Dropdown';
 import { Input } from '../Input';
@@ -61,6 +61,7 @@ export interface IBuyPanelProps {
   openBuyOrdersTotal?: number;
   openBuyOrdersPage?: number;
   onOpenBuyOrdersPageChange?: (page: number) => void;
+  isLoading?: boolean;
 }
 
 export const BuyPanel: React.FC<IBuyPanelProps> = ({
@@ -90,6 +91,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   openBuyOrdersTotal = 0,
   openBuyOrdersPage = 1,
   onOpenBuyOrdersPageChange,
+
 }) => {
   const [name, setName] = useState('');
   const [showFilters, setShowFilters] = useState(false);
@@ -369,76 +371,83 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
       )}
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {!hasVisibleContent && <EmptyState>No offers match the current filters.</EmptyState>}
-
-        {showSellSection && (
-          <MarketSection>
-            <SectionHeader>
-              <SectionTitle>Sell Offers</SectionTitle>
-              <SectionMeta>{groupedItems.length} groups</SectionMeta>
-            </SectionHeader>
-            {groupedItems.length === 0 ? (
-              <SectionEmpty>No sell offers found.</SectionEmpty>
-            ) : (
-              groupedItems.map(({ bestListing, otherListings }) => (
-                <GroupedMarketplaceRow
-                  key={bestListing.item.key}
-                  bestListing={bestListing}
-                  otherListings={otherListings}
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  equipmentSet={equipmentSet}
-                  dcToGoldSwapRate={dcToGoldSwapRate}
-                  getDCEquivalentPrice={getDCEquivalentPrice}
-                  characterId={characterId}
-                  onBuy={setBuyingItemId}
-                />
-              ))
-            )}
-            {totalItems > itemsPerPage && (
-              <SectionPager>
-                <Pager
-                  totalItems={totalItems}
-                  currentPage={currentPage}
-                  itemsPerPage={itemsPerPage}
-                  onPageChange={onPageChange}
-                />
-              </SectionPager>
+        {!hasVisibleContent ? (
+          <LoadingState>
+            <Spinner />
+            <LoadingText>Loading marketplace...</LoadingText>
+          </LoadingState>
+        ) : (
+          <>
+            {showSellSection && (
+              <MarketSection>
+                <SectionHeader>
+                  <SectionTitle>Sell Offers</SectionTitle>
+                  <SectionMeta>{groupedItems.length} groups</SectionMeta>
+                </SectionHeader>
+                {groupedItems.length === 0 ? (
+                  <SectionEmpty>No sell offers found.</SectionEmpty>
+                ) : (
+                  groupedItems.map(({ bestListing, otherListings }) => (
+                    <GroupedMarketplaceRow
+                      key={bestListing.item.key}
+                      bestListing={bestListing}
+                      otherListings={otherListings}
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      equipmentSet={equipmentSet}
+                      dcToGoldSwapRate={dcToGoldSwapRate}
+                      getDCEquivalentPrice={getDCEquivalentPrice}
+                      characterId={characterId}
+                      onBuy={setBuyingItemId}
+                    />
+                  ))
+                )}
+                {totalItems > itemsPerPage && (
+                  <SectionPager>
+                    <Pager
+                      totalItems={totalItems}
+                      currentPage={currentPage}
+                      itemsPerPage={itemsPerPage}
+                      onPageChange={onPageChange}
+                    />
+                  </SectionPager>
+                )}
+              </MarketSection>
             )}
-          </MarketSection>
-        )}
 
-        {showBuySection && (
-          <MarketSection>
-            <SectionHeader>
-              <SectionTitle>Buy Requests</SectionTitle>
-              <SectionMeta>{visibleBuyOrders.length} visible</SectionMeta>
-            </SectionHeader>
-            {visibleBuyOrders.length === 0 ? (
-              <SectionEmpty>No public buy requests found.</SectionEmpty>
-            ) : (
-              visibleBuyOrders.map(order => (
-                <BuyOrderRow
-                  key={order._id}
-                  buyOrder={order}
-                  atlasJSON={atlasJSON}
-                  atlasIMG={atlasIMG}
-                  onFulfill={setFulfillingBuyOrderId}
-                  showRequestTag
-                />
-              ))
-            )}
-            {openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
-              <SectionPager>
-                <Pager
-                  totalItems={openBuyOrdersTotal}
-                  currentPage={openBuyOrdersPage}
-                  itemsPerPage={BUY_REQUESTS_PER_PAGE}
-                  onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
-                />
-              </SectionPager>
+            {showBuySection && (
+              <MarketSection>
+                <SectionHeader>
+                  <SectionTitle>Buy Requests</SectionTitle>
+                  <SectionMeta>{visibleBuyOrders.length} visible</SectionMeta>
+                </SectionHeader>
+                {visibleBuyOrders.length === 0 ? (
+                  <SectionEmpty>No public buy requests found.</SectionEmpty>
+                ) : (
+                  visibleBuyOrders.map(order => (
+                    <BuyOrderRow
+                      key={order._id}
+                      buyOrder={order}
+                      atlasJSON={atlasJSON}
+                      atlasIMG={atlasIMG}
+                      onFulfill={setFulfillingBuyOrderId}
+                      showRequestTag
+                    />
+                  ))
+                )}
+                {openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
+                  <SectionPager>
+                    <Pager
+                      totalItems={openBuyOrdersTotal}
+                      currentPage={openBuyOrdersPage}
+                      itemsPerPage={BUY_REQUESTS_PER_PAGE}
+                      onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
+                    />
+                  </SectionPager>
+                )}
+              </MarketSection>
             )}
-          </MarketSection>
+          </>
         )}
       </ItemComponentScrollWrapper>
     </>
@@ -622,18 +631,6 @@ const SectionEmpty = styled.div`
   border-radius: 6px;
 `;
 
-const EmptyState = styled.div`
-  min-height: 96px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #71717a;
-  font-size: 0.52rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 0 16px;
-  text-align: center;
-`;
 
 const SectionPager = styled.div`
   display: flex;
@@ -645,3 +642,33 @@ const StyledDropdown = styled(Dropdown)`
   margin: 0px !important;
   width: 100% !important;
 `;
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+
+const LoadingState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  height: 100%;
+  min-height: 160px;
+`;
+
+const Spinner = styled.div`
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(245, 158, 11, 0.2);
+  border-top-color: #f59e0b;
+  border-radius: 50%;
+  animation: ${spin} 0.7s linear infinite;
+`;
+
+const LoadingText = styled.span`
+  font-size: 0.48rem;
+  color: #8a8a8a;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;

package/src/components/Marketplace/Marketplace.tsx

@@ -65,6 +65,7 @@ export interface IMarketPlaceProps {
   acceptedCurrency?: MarketplaceAcceptedCurrency;
   onAcceptedCurrencyChange?: (value: MarketplaceAcceptedCurrency) => void;
   onActiveTabChange?: (tab: string) => void;
+  isLoading?: boolean;
 
   // Buy Order props
   buyOrderSelectedBlueprint?: IMarketplaceBlueprintSummary;