diff --git a/thallium-frontend/src/pages/StorePage.tsx b/thallium-frontend/src/pages/StorePage.tsx index a3143d3..468075b 100644 --- a/thallium-frontend/src/pages/StorePage.tsx +++ b/thallium-frontend/src/pages/StorePage.tsx @@ -8,6 +8,9 @@ import StoreItem from "../components/StoreItem"; import styled from "styled-components"; import { Link } from "react-router-dom"; +import LoadingBar from "../components/LoadingBar"; + + const StoreGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); @@ -20,10 +23,15 @@ const StorePage = () => { const voucherToken = useSelector((state: RootState) => state.authorization.voucherToken); const [storeItems, setStoreItems] = useState(null); const [permissionDenied, setPermissionDenied] = useState(false); + const [loading, setLoading] = useState(true); useEffect(() => { - getTemplates(true).then(setStoreItems).catch((err: unknown) => { + getTemplates(true).then((items) => { + setStoreItems(items); + setLoading(false); + }).catch((err: unknown) => { setStoreItems([]); + setLoading(false); if (err instanceof APIMissingTokenError) { setPermissionDenied(true); } @@ -33,6 +41,7 @@ const StorePage = () => { return ( <>

Giveaway Store

+ {loading && } {storeItems?.map((item) => (