modal: fix sharing modal

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/modal/ModalMixin.ts

@@ -7,6 +7,7 @@ export default defineComponent({
 
   data: () => ({
     show: false,
+    _closing: null as null | ((value: unknown) => void),
   }),
 
   mounted() {
@@ -18,15 +19,27 @@ export default defineComponent({
   },
 
   watch: {
-    show(value: boolean, from: boolean) {
+    show(value: boolean) {
       utils.fragment.if(value, utils.fragment.types.modal);
+
+      if (!value) {
+        this._closing?.(null);
+        this._closing = null;
+      }
     },
   },
 
   methods: {
-    close() {
-      if (this.show) {
+    async close() {
+      if (this.show && !this._closing) {
+        // pop the fragment immediately
+        await utils.fragment.pop(utils.fragment.types.modal);
+
+        // close the modal with animation
         (<any>this.$refs.modal)?.close?.();
+
+        // wait for transition to end
+        await new Promise((resolve) => (this._closing = resolve));
       }
     },
   },

src/components/modal/ShareModal.vue

@@ -155,10 +155,10 @@ export default defineComponent({
       this.photo = null;
     },
 
-    async l(cb: Function) {
+    async l<T>(cb: () => Promise<T>): Promise<T> {
       try {
         this.loading++;
-        await cb();
+        return await cb();
       } finally {
         this.loading--;
       }
@@ -195,11 +195,9 @@ export default defineComponent({
     },
 
     async shareLink() {
-      this.l(async () => {
-        const fileInfo = (await dav.getFiles([this.photo!]))[0];
-        _m.modals.shareNodeLink(fileInfo.filename, true);
-      });
-      this.close();
+      const fileInfo = await this.l(async () => (await dav.getFiles([this.photo!]))[0]);
+      await this.close(); // wait till transition is done
+      _m.modals.shareNodeLink(fileInfo.filename, true);
     },
 
     /**

src/services/utils/fragment.ts

@@ -84,7 +84,7 @@ export const fragment = {
    * Add fragment to route.
    * @param frag Fragment to add to route
    */
-  push(type: FragmentType, ...args: string[]) {
+  async push(type: FragmentType, ...args: string[]) {
     const frag: Fragment = { type, args };
     const list = this.list;
 
@@ -101,7 +101,7 @@ export const fragment = {
       if (hash === _m.route.hash) return;
 
       // Replace the route with the new fragment
-      _m.router.replace({
+      await _m.router.replace({
         path: _m.route.path,
         query: _m.route.query,
         hash: hash,
@@ -118,7 +118,7 @@ export const fragment = {
 
     // Add fragment to route
     list.push(frag);
-    _m.router.push({
+    await _m.router.push({
       path: _m.route.path,
       query: _m.route.query,
       hash: encodeFragment(list),
@@ -129,7 +129,7 @@ export const fragment = {
    * Remove the top fragment from route.
    * @param type Fragment identifier
    */
-  pop(type: FragmentType) {
+  async pop(type: FragmentType) {
     // Get the index of this fragment from the end
     const frag = this.get(type);
     if (!frag) return;
@@ -141,7 +141,7 @@ export const fragment = {
     // In that case, replace the route to remove the fragment
     const sfrag = this.get(type);
     if (sfrag) {
-      _m.router.replace({
+      await _m.router.replace({
         path: _m.route.path,
         query: _m.route.query,
         hash: encodeFragment(this.list.slice(0, -sfrag.index! - 1)),
@@ -152,9 +152,9 @@ export const fragment = {
   /**
    * Sync a fragment with a boolean condition.
    */
-  if(condition: boolean, type: FragmentType, ...args: string[]) {
-    if (condition) this.push(type, ...args);
-    else this.pop(type);
+  async if(condition: boolean, type: FragmentType, ...args: string[]) {
+    if (condition) await this.push(type, ...args);
+    else await this.pop(type);
   },
 
   get viewer() {