import Layout from "../../components/layout"; import { useUser } from "@auth0/nextjs-auth0/client"; import { Box, Grid, Card, CardContent, Typography, List, Button, CircularProgress, Tooltip } from "@mui/material"; import { useState, useEffect } from "react"; import { useRouter } from 'next/router' import ArtistPortfolio from "../../components/artistPortfolio"; const SellerProfile = () => { const { user, isLoading } = useUser(); const router = useRouter() const { id } = router.query const [sellerData, setSellerData] = useState([]); const [loading, setLoading] = useState(true); // State for loading indicator useEffect(() => { const getData = async () => { if(id){ const response = await fetch('/api/discovery/artist/'+id); const data = await response.json(); setSellerData(data); setLoading(false); // Once data is fetched, set loading to false } } getData(); }, [id]); const [value, setValue] = useState(0); return ( {loading ? ( // Render loading indicator if loading is true Loading ) : ( {sellerData["name"]} Biography {sellerData["biography"]} Social Media {user ? ( ) : ( )} )} ); }; export default SellerProfile;