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>
  );
}