How can I show a message to the user when in the browser the request sends a 504 gateaway timeout?

Right now when I send a request with multiple collections, the browser chrome shows me a 504 timeout ‘cos it has taken more than 60 seconds.
The client has asked me to display a new message to the user when this issue happens. I’m a bit lost as this is the first time that I have to deal with the 504 timeout.

I need help with my code and to change the function that deals with the request, handleClickCreateViewButton() and with the useLazyQuery and apply this new scenario.
Could someone help me with dealing with this status code in the front?
This is the code:

interface ButtonProps {
  isLargeScreen: boolean;
  onClick: () => void;
  isOptionSelected: boolean;
}
const CreateViewButton = ({ isLargeScreen, onClick, isOptionSelected }: ButtonProps): ReactElement => (
  <Button size={isLargeScreen ? 'large' : 'small'} disabled={!isOptionSelected} onClick={(): void => void onClick()}>
    view report
  </Button>
);

 export const ReportsFooter = ({
    isOptionSelected,
    handleOnClearAll,
    sortby,
    collectionNames,
    collectionNumbers,
    brandName,
    productLineNames,
    purchaseDivisionNames,
    productLineNumbers,
    purchaseDivisionNumbers,
    buyerEmails,
    buyerNames,
    styleCategoryNumbers,
    styleCategoryNames,
    deliveryPeriodNumbers,
    deliveryPeriodNames,
    supplierNumbers,
    supplierNames,
    styleNumbers,
   }: {
    isOptionSelected: boolean;
    handleOnClearAll: () => void;
    sortby: string;
    collectionNames: Array<string>;
    collectionNumbers: Array<number>;
    brandName: string;
    productLineNames?: Array<string>;
    purchaseDivisionNames?: Array<string>;
    productLineNumbers?: Array<string>;
    purchaseDivisionNumbers?: Array<number>;
    buyerEmails?: Array<string>;
    buyerNames?: Array<string>;
    styleCategoryNumbers?: Array<string>;
    styleCategoryNames?: Array<string>;
    deliveryPeriodNumbers?: Array<number>;
    deliveryPeriodNames?: Array<string>;
    supplierNumbers?: Array<string>;
    supplierNames?: Array<string>;
    styleNumbers?: Array<number>;
  }): ReactElement => {

  const theme = useTheme();
  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));

  const { buyingProfile } = useProfiles();
  const { setPendingProcess } = useContext(ProgressDialogContext);

  const [getCollectionReportOverview, { loading }] = useLazyQuery(
    GET_COLLECTION_REPORT_OVERVIEW,
    {
      onCompleted: (result) => {
        // eslint-disable-next-line no-console
        console.log('Full GraphQL Response:', result);
        const pdfUrl = result?.getCollectionReportOverview;
        // eslint-disable-next-line no-console
        console.log('PDF URL:', pdfUrl);

        // Reset the pending process
        setPendingProcess(undefined);

        if (pdfUrl) {
          // eslint-disable-next-line no-console
          console.log('Redirecting to PDF URL');
          window.open(pdfUrl, '_blank');
        } else {
          // eslint-disable-next-line no-console
          console.log('No PDF URL received');
        }
      },
      onError: (error) => {
        console.error('GraphQL error:', error);
      },
      fetchPolicy: 'network-only',
      context: { clientName: GraphClientNames['reports'] },
    }
  );

  const filterReportCollectionOverview = {
    collectionNames: collectionNames,
    collectionNumbers: collectionNumbers,
    productLineNames: productLineNames ?? [],
    productLineNumbers: productLineNumbers ?? [],
    purchaseDivisionNames: purchaseDivisionNames ?? [],
    purchaseDivisionNumbers: purchaseDivisionNumbers ?? [],
    buyerEmails: buyerEmails ?? [],
    buyerNames: buyerNames ?? [],
    styleCategoryNumbers: styleCategoryNumbers ?? [],
    styleCategoryNames: styleCategoryNames ?? [],
    deliveryPeriodNumbers: deliveryPeriodNumbers ?? [],
    deliveryPeriodNames: deliveryPeriodNames ?? [],
    supplierNumbers: supplierNumbers ?? [],
    supplierNames: supplierNames ?? [],
    brandName: brandName,
    createdByName: buyingProfile?.name,
    createdBy:  buyingProfile?.userNumber,
    sortBy: sortby,
    styleNumbers: styleNumbers ?? [],
  };

  const handleClickCreateViewButton = (): void => {
    setPendingProcess({
      processId: uuid(),
      title: 'Generating Report',
      progressState: 'PENDING',
    });
    getCollectionReportOverview({
      variables: {
        filterReportCollectionOverview: filterReportCollectionOverview,
      },
    });
  };

  const hintComponent = (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        flex: '1',
        alignItems: 'center',
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
          flex: '1',
        }}
      >
        <Typography variant={isLargeScreen ? 'body.default' : 'bodySmall.default'} sx={{ whiteSpace: 'nowrap' }}>
          * required:&nbsp;
        </Typography>
        <Typography variant={isLargeScreen ? 'body.highlight' : 'bodySmall.highlight'} sx={{ paddingLeft: 1, whiteSpace: 'nowrap' }}>
          {isOptionSelected ? '1/1' : '0/1'}
        </Typography>
      </Box>
      <Typography variant='captions.default' sx={{ paddingLeft: 1, whiteSpace: 'nowrap' }}>
        {isOptionSelected ? "You're good to go" : 'Select a Collection'}
      </Typography>
    </Box>
  );

  return (
    <>
      {loading && (
        <ProgressDialog
          title="Generating Report"
          progressState="PENDING"
          message="Please wait while the report is being generated."
          open
          onClose={() => void setPendingProcess(undefined)}
        />
      )}
      <ProcessFooter
        leftSideComponents={[
          <Button
            key='cancel-button'
            variant="outlined"
            size={isLargeScreen ? 'large' : 'small'}
            disabled={!isOptionSelected}
            onClick={handleOnClearAll}
          >
            <CrossIcon style={{ padding: '0px 12px 0px 0px' }} />
            clear all
          </Button>,
        ]}
        hint={hintComponent}
        rightSideComponents={[
          <CreateViewButton
            key='create-orders-button'
            isLargeScreen={isLargeScreen}
            isOptionSelected={isOptionSelected}
            onClick={handleClickCreateViewButton}
          />,
        ]}
      />
    </>
  );
};