import { Suspense } from 'react';
import { useQuery } from 'react-query';
const baseURL = determineBaseURL(); // Determine the API endpoint based on production or local development
const MyComponent = ({ waitTime }) => {
const { data } = useQuery('queryKey', () => fetch(baseURL + waitTime));
return <div>{data}</div>;
};
export default function SomePage() {
return (
<div>
{' '}
<Suspense fallback={<LoadingSpinner />}>
{' '}
<MyComponent waitTime={500} /> <MyComponent waitTime={10000} />{' '}
{/* Add more instances of MyComponent with different wait times */}{' '}
</Suspense>{' '}
</div>
);
}