ui: fix transition callback (#874)

packages/ui-default/package.json

@@ -14,7 +14,7 @@
     "cli": false
   },
   "devDependencies": {
-    "@blueprintjs/core": "^5.12.0",
+    "@blueprintjs/core": "^5.13.0",
     "@cordisjs/core": "3.17.3",
     "@fontsource/dm-mono": "^5.1.0",
     "@fontsource/fira-code": "^5.1.0",
@@ -25,7 +25,7 @@
     "@fontsource/source-code-pro": "^5.1.0",
     "@fontsource/ubuntu-mono": "^5.1.0",
     "@hydrooj/utils": "workspace:^",
-    "@sentry/browser": "^8.30.0",
+    "@sentry/browser": "^8.32.0",
     "@sentry/webpack-plugin": "^2.22.4",
     "@simplewebauthn/browser": "9.0.1",
     "@svgr/webpack": "^8.1.0",
@@ -37,7 +37,7 @@
     "@types/nunjucks": "^3.2.6",
     "@types/pickadate": "^3.5.35",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.7",
+    "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@types/redux-logger": "^3.0.13",
     "@types/uuid": "^10.0.0",
@@ -69,7 +69,7 @@
     "jquery.easing": "^1.4.1",
     "jquery.transit": "^0.9.12",
     "matchmedia-polyfill": "^0.3.2",
-    "md-editor-rt": "^4.20.1",
+    "md-editor-rt": "^4.20.2",
     "mini-css-extract-plugin": "^2.9.1",
     "moment": "^2.30.1",
     "monaco-editor": "0.50.0",
@@ -115,7 +115,7 @@
     "timeago.js": "^4.0.2",
     "ts-loader": "^9.5.1",
     "web-streams-polyfill": "^4.0.0",
-    "webpack": "^5.94.0",
+    "webpack": "^5.95.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-server": "^5.1.0",
     "webpack-manifest-plugin": "^5.0.0",
@@ -137,7 +137,7 @@
     "markdown-it-imsize": "^2.0.1",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-merge-cells": "^2.0.0",
-    "markdown-it-table-of-contents": "^0.6.0",
+    "markdown-it-table-of-contents": "^0.8.0",
     "nunjucks": "^3.2.4",
     "schemastery-jsonschema": "^1.1.0",
     "streamsaver": "^2.0.6",

packages/ui-default/pages/record_detail.page.tsx

@@ -2,11 +2,11 @@ import $ from 'jquery';
 import React from 'react';
 import { InfoDialog } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
-import { tpl, withTransistionCallback } from 'vj/utils';
+import { tpl, withTransitionCallback } from 'vj/utils';
 
 export default new NamedPage('record_detail', async () => {
   $(document).on('click', '.compiler-text', () => {
-    withTransistionCallback(() => {
+    withTransitionCallback(() => {
       $('.collapsed').removeClass('collapsed');
     });
   });
@@ -30,13 +30,17 @@ export default new NamedPage('record_detail', async () => {
   sock.onmessage = (_, data) => {
     const msg = JSON.parse(data);
     if (typeof msg.status === 'number' && window.parent) window.parent.postMessage({ status: msg.status });
-    withTransistionCallback(() => {
+    withTransitionCallback(() => {
       const newStatus = $(msg.status_html);
       const oldStatus = $('#status');
+      oldStatus.trigger('vjContentRemove');
       dd.apply(oldStatus[0], dd.diff(oldStatus[0], newStatus[0]));
+      $('#status').trigger('vjContentNew');
       const newSummary = $(msg.summary_html);
       const oldSummary = $('#summary');
+      oldSummary.trigger('vjContentRemove');
       dd.apply(oldSummary[0], dd.diff(oldSummary[0], newSummary[0]));
+      $('#summary').trigger('vjContentNew');
     });
   };
 });

packages/ui-default/pages/record_main.page.ts

@@ -4,7 +4,7 @@ import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoCom
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
 import {
-  getAvailableLangs, request, tpl, withTransistionCallback,
+  getAvailableLangs, request, tpl, withTransitionCallback,
 } from 'vj/utils';
 
 const page = new NamedPage('record_main', async () => {
@@ -20,7 +20,7 @@ const page = new NamedPage('record_main', async () => {
   sock.onmessage = (_, data) => {
     const msg = JSON.parse(data);
     const $newTr = $(msg.html);
-    withTransistionCallback(() => {
+    withTransitionCallback(() => {
       const $oldTr = $(`.record_main__table tr[data-rid="${$newTr.attr('data-rid')}"]`);
       if ($oldTr.length) {
         $oldTr.trigger('vjContentRemove');

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) {