ui: fix transition callback (#874)

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');