From 494012484edf19defe4f9f78fb619e8b091c01a8 Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Fri, 14 Jul 2023 23:43:10 -0400
Subject: [PATCH] fix: Add feedback when user installs app [CAL-2144] (#10169)

* Prevent multiple clicks on app store

* Disable multiple clicks on app page

* Disable multiple clicks on app page

* Clean up
---
 apps/web/components/apps/App.tsx        | 13 ++++++++++++-
 packages/ui/components/apps/AppCard.tsx | 11 ++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index 6f63ab15d7..15f3d5d604 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -29,6 +29,8 @@ import {
   Avatar,
 } from "@calcom/ui";
 import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
+import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
+
 
 /* These app slugs all require Google Cal to be installed */
 
@@ -441,7 +443,16 @@ const InstallAppButtonChild = ({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
-        <DropdownMenuContent>
+        <DropdownMenuContent
+        onInteractOutside={(event) => {
+          if (mutation.isLoading) event.preventDefault();
+        }}
+        >
+          {mutation.isLoading && (
+              <div className="z-1 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+                <Spinner />
+              </div>
+            )}
           <DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel>
           {userAdminTeams.map((team) => {
             
diff --git a/packages/ui/components/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx
index c840c15437..5e7f77eef8 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
+import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
 import classNames from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -224,7 +225,15 @@ const InstallAppButtonChild = ({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
-        <DropdownMenuContent>
+        <DropdownMenuContent
+          onInteractOutside={(event) => {
+            if (mutation.isLoading) event.preventDefault();
+          }}>
+          {mutation.isLoading && (
+            <div className="z-1 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+              <Spinner />
+            </div>
+          )}
           <DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel>
           {userAdminTeams.map((team) => {
             const isInstalledTeamOrUser =