From 3dd5c880b753d6127d81ecf47a4e4f942b23fee6 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 25 Sep 2023 12:42:39 +0100
Subject: [PATCH] fix: ape key not shown after generation

Fixed by making the close function async and resolving the promise on animation finish

Closes #4657
---
 frontend/src/ts/popups/simple-popups.ts | 48 +++++++++++++++++--------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/popups/simple-popups.ts b/frontend/src/ts/popups/simple-popups.ts
index 2356c1206..5b6b03e52 100644
--- a/frontend/src/ts/popups/simple-popups.ts
+++ b/frontend/src/ts/popups/simple-popups.ts
@@ -51,6 +51,7 @@ interface ExecReturn {
   message: string;
   showNotification?: false;
   notificationOptions?: MonkeyTypes.AddNotificationOptions;
+  afterHide?: () => void;
 }
 
 const list: { [key: string]: SimplePopup } = {};
@@ -232,7 +233,11 @@ class SimplePopup {
         Notifications.add(res.message, res.status, res.notificationOptions);
       }
       if (res.status === 1) {
-        this.hide();
+        this.hide().then(() => {
+          if (res.afterHide) {
+            res.afterHide();
+          }
+        });
       } else {
         this.enableInputs();
         $($("#simplePopup").find("input")[0]).trigger("focus");
@@ -271,22 +276,33 @@ class SimplePopup {
       });
   }
 
-  hide(): void {
-    if (!this.canClose) return;
-    activePopup = null;
-    this.wrapper
-      .stop(true, true)
-      .css("opacity", 1)
-      .removeClass("hidden")
-      .animate({ opacity: 0 }, this.noAnimation ? 0 : 125, () => {
-        this.wrapper.addClass("hidden");
-        Skeleton.remove(wrapperId);
-      });
+  async hide(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (!this.canClose) {
+        reject(new Error("Cannot close popup"));
+        return;
+      }
+
+      activePopup = null;
+
+      this.wrapper
+        .stop(true, true)
+        .css("opacity", 1)
+        .removeClass("hidden")
+        .animate({ opacity: 0 }, this.noAnimation ? 0 : 125, () => {
+          this.wrapper.addClass("hidden");
+          Skeleton.remove(wrapperId);
+          resolve();
+        });
+    });
   }
 }
 
 function hide(): void {
-  if (activePopup) return activePopup.hide();
+  if (activePopup) {
+    activePopup.hide();
+    return;
+  }
   $("#simplePopupWrapper")
     .stop(true, true)
     .css("opacity", 1)
@@ -1232,11 +1248,13 @@ list["generateApeKey"] = new SimplePopup(
     }
 
     const data = response.data;
-    list["viewApeKey"].show([data.apeKey]);
 
     return {
       status: 1,
       message: "Key generated",
+      afterHide: (): void => {
+        list["viewApeKey"].show([data.apeKey]);
+      },
     };
   },
   () => {
@@ -1278,7 +1296,7 @@ list["viewApeKey"] = new SimplePopup(
     setTimeout(() => {
       _thisPopup.canClose = true;
       $("#simplePopup .button").removeClass("hidden");
-    }, 3000);
+    }, 5000);
   }
 );