ui: fix transition callback (#874)

packages/ui-default/utils/base.ts

@@ -183,11 +183,12 @@ export const request = {
   },
 };
 
-export function withTransistionCallback(callback: () => (Promise<void> | void)) {
+export async function withTransitionCallback(callback: () => (Promise<void> | void)) {
   // @ts-ignore
   if (!document.startViewTransition) return callback?.();
   // @ts-ignore
-  return document.startViewTransition(() => callback());
+  const transition = document.startViewTransition(callback);
+  return await transition.finished;
 }
 
 export async function setTemporaryViewTransitionNames(entries, vtPromise: Promise<void>) {
@@ -213,6 +214,6 @@ Object.assign(window.Hydro.utils, {
   tpl,
   delay,
   zIndexManager,
-  withTransistionCallback,
+  withTransitionCallback,
   setTemporaryViewTransitionNames,
 });

packages/ui-default/utils/pjax.js

@@ -5,7 +5,7 @@ import $ from 'jquery';
 import { nanoid } from 'nanoid';
 import NProgress from 'nprogress';
 import Notification from 'vj/components/notification';
-import { request, withTransistionCallback } from './base';
+import { request, withTransitionCallback } from './base';
 
 const pjax = {};
 
@@ -115,8 +115,10 @@ pjax.request = async (opt) => {
         }
       }
       $target.trigger('vjContentRemove');
-      withTransistionCallback(() => $target.replaceWith($el));
-      $el.trigger('vjContentNew');
+      await withTransitionCallback(() => {
+        $target.replaceWith($el);
+        $el.trigger('vjContentNew');
+      });
     }
   } catch (err) {
     if (!err.aborted) {