How to handle time taking processes in slack app view

Question

  import { NextApiRequest, NextApiResponse } from 'next';
  import NextConnectReceiver from 'src/utils/NextConnectReceiver';
  import { App } from "@slack/bolt";
  //@ts-ignore
  import dotenv from 'dotenv';
  import { handleOpenReportModal, handleGenerateReport } from "../../events/report";
  import { handleAppLoad } from "../../events/home";
  import { handleCherryReaction } from "../../events/reaction";
  import initializeFirebase from "../../db";
  import { respondToReportQuestions } from 'src/utils/ask';

  dotenv.config();
  const receiver = new NextConnectReceiver({
    signingSecret: process.env.SLACK_SIGNING_SECRET || 'invalid',
    processBeforeResponse: true
  });

  const processedMessages = new Set<string>();
  const MESSAGE_EXPIRY = 60000;

  const app = new App({
    token: process.env.SLACK_BOT_TOKEN,
    signingSecret: process.env.SLACK_SIGNING_SECRET,
    receiver: receiver
  });

  // Single initialization flag
  let isInitialized = false;

  const initializeApp = async () => {
    if (!isInitialized) {
      try {
        await initializeFirebase();

        // Command handlers
        app.command("/report", async ({ ack, ...req }) => {
          await ack();
          await handleOpenReportModal(req);
        });

        // // View handlers
        app.view({ callback_id: "report_modal" }, async (req) => {
          const { ack } = req;
          await ack();
          console.log("Report modal view");
          try {
            handleGenerateReport(req);

          } catch (error) {
            console.error("Error adding job to queue:", error);
          }
        });

    
        app.error(async (error) => {
          console.error("Cherry app error:", error);
        });

        receiver.init(app);

        isInitialized = true;
        console.log("🍒 Cherry app is running!");
      } catch (error) {
        console.error("Unable to start App", error);
      }
    }
  };
  // Initialize the app
  initializeApp();

  const router = receiver.start();
  export default router;

Report modal where I am having issue

  app.view({ callback_id: "report_modal" }, async (req) => {
    const { ack } = req;
    await ack();
    console.log("Report modal view");
    try {
      handleGenerateReport(req);
      
    } catch (error) {
      console.error("Error adding job to queue:", error);
    }
  });
 

I am building a Slack app that opens a modal when a command is used. After submitting the modal, the app generates an AI report and sends it back to the same channel where the command was triggered.

The problem is that when I press submit, I get an error message saying, "We had some trouble connecting. Try again?" The report is not generated, and it’s not sent to the channel. I suspect this might be a timeout issue because the process takes a long time.

I need help understanding how to handle these long-running processes efficiently.

Technologies I’m using: Next.js, @slack/bolt, and Vercel.

I built the Slack app by following the steps outlined in this article https://medium.com/@alibadereddin/building-the-backend-for-a-slack-app-with-nextjs-and-vercel-e1503b938e6b