@rpg-engine/long-bow 0.8.148 → 0.8.149

package/package.json

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

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,
+  isLoading = false,
 }) => {
   const [name, setName] = useState('');
   const [showFilters, setShowFilters] = useState(false);
@@ -369,7 +371,13 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
       )}
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {!hasVisibleContent && <EmptyState>No offers match the current filters.</EmptyState>}
+        {isLoading && !hasVisibleContent && (
+          <LoadingState>
+            <Spinner />
+            <LoadingText>Loading marketplace...</LoadingText>
+          </LoadingState>
+        )}
+        {!isLoading && !hasVisibleContent && <EmptyState>No offers match the current filters.</EmptyState>}
 
         {showSellSection && (
           <MarketSection>
@@ -645,3 +653,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;