core&ui: allow skipAnimation

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.17.0",
+    "version": "3.17.1",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",

packages/hydrooj/src/model/setting.ts

@@ -131,6 +131,7 @@ const ServerLangSettingNode = {
 
 PreferenceSetting(
     Setting('setting_display', 'viewLang', null, langRange, 'UI Language'),
+    Setting('setting_display', 'skipAnimate', false, 'boolean', 'Skip Animation'),
     Setting('setting_display', 'timeZone', 'Asia/Shanghai', timezones, 'Timezone'),
     LangSettingNode,
     Setting('setting_usage', 'codeTemplate', '', 'textarea', 'Default Code Template',

packages/ui-default/components/react/DomComponent.tsx

@@ -9,6 +9,6 @@ export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement>
     return () => {
       $(ref.current).empty();
     };
-  });
+  }, []);
   return <div {...omit(props, 'childDom')} ref={ref}></div>;
 }

packages/ui-default/hydro.ts

@@ -37,6 +37,24 @@ function buildSequence(pages, type) {
     }));
 }
 
+async function animate() {
+  if (UserContext.skipAnimate) return;
+  const style = document.createElement('style');
+  style.innerHTML = `.section {
+    transition: transform .5s, opacity .5s;
+    transition-timing-function: ease-out-cubic;
+  }`;
+  document.head.append(style);
+  const sections = _.map($('.section').get(), (section, idx) => ({
+    shouldDelay: idx < 5, // only animate first 5 sections
+    $element: $(section),
+  }));
+  for (const { $element, shouldDelay } of sections) {
+    $element.addClass('visible');
+    if (shouldDelay) await delay(50);
+  }
+}
+
 async function load() {
   for (const page of window.Hydro.preload) await eval(page); // eslint-disable-line no-eval
 
@@ -78,18 +96,12 @@ async function load() {
       console.log(`${page.name}: ${type}Loading took ${time}ms`);
     }
   }
-  const sections = _.map($('.section').get(), (section, idx) => ({
-    shouldDelay: idx < 5, // only animate first 5 sections
-    $element: $(section),
-  }));
-  $('.page-loader').hide();
   console.log('done! %d ms', Date.now() - start.getTime());
-  for (const { $element, shouldDelay } of sections) {
+  $('.page-loader').hide();
-    $element.addClass('visible');
+  await animate();
-    if (shouldDelay) await delay(50);
+  $('.section').addClass('visible');
-  }
   await delay(500);
-  for (const { $element } of sections) $element.trigger('vjLayout');
+  $('.section').trigger('vjLayout');
   $(document).trigger('vjPageFullyInitialized');
 }
 

packages/ui-default/misc/section.styl

@@ -14,8 +14,6 @@
 .section
   background: $section-bg-color
   box-shadow: $section-shadow
-  transition: transform .5s, opacity .5s
-  transition-timing-function: ease-out-cubic
 
   +mobile()
     box-shadow: none

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.40.0",
+  "version": "4.40.1",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/templates/record_main_tr.html

@@ -21,7 +21,7 @@
     *
   {% endif %}
   {% if rdoc.files.hack %}<span class="text-orange">({{ _('Hack') }})</span>{% endif %}
-  {% if rdoc.contest and rdoc.contest.toHexString() == '000000000000000000000000' %}<span class="text-orange">(({{ _('Pretest') }})</span>{% endif %}
+  {% elif rdoc.contest and rdoc.contest.toString() == '000000000000000000000000' %}<span class="text-orange">({{ _('Pretest') }})</span>{% endif %}
   </td>
   <td class="col--submit-by">
     <a href="{{ url('user_detail', uid=rdoc.uid) }}">