Add loading tip for list & add animations

list.html

@@ -1,2 +1,6 @@
 <!-- <mdui-text-field clearable label="输入你想搜索的量表" id="searchBar"></mdui-text-field> -->
+<div id="loadingTip" class="center">
+    <mdui-circular-progress></mdui-circular-progress>
+    <p>题库正在加载，很快就好</p>
+</div>
 <mdui-list id="questionnaireList"></mdui-list>

src/index.css

@@ -66,6 +66,8 @@ strong {
 /* 答题页面样式 */
 #testContainer {
     display: none;
+    opacity: 0;
+    transition: 0.1s opacity;
     /* 
     display: flex;
     flex-direction: column;
@@ -77,6 +79,17 @@ strong {
     margin: 5% 2% 26% 2%;
 }
 
+#loadingTip {
+    opacity: 1;
+    transition: 0.1s opacity;
+}
+
+#questionnaireList {
+    display: none;
+    opacity: 0;
+    transition: 0.1s opacity;
+}
+
 a {
     text-overflow: ellipsis;
     overflow: hidden;

src/list/index.ts

@@ -8,7 +8,7 @@ import type { Badge } from 'mdui/components/badge.js';
 import type { ListSubheader } from 'mdui/components/list-subheader.js';
 import type { List } from 'mdui/components/list.js';
 import { Category, QuestionnaireList, QuestionnaireListItem, QuestionnairesList } from '../interfaces';
-import { hide } from '../utils/element';
+import { hide, show } from '../utils/element';
 // import { TextField } from 'mdui/components/text-field.js';
 import { LogHelper } from '../utils/LogHelper';
 import { getFile } from '../utils/network';
@@ -18,6 +18,8 @@ const logHelper = LogHelper.getInstance();
 
 document.addEventListener('listPageLoaded', async () => {
     const mduiList: List = document.querySelector('#questionnaireList')!;
+    const loadingTip: HTMLDivElement = document.querySelector('#loadingTip')!;
+    hide(mduiList);
     // const searchBar: TextField = document.querySelector('#searchBar')!;
     getFile(`https://cdn.jsdelivr.net/gh/Super12138/AY-Questionnaires-DB@main/list.json?${new Date().getTime()}`)
         .then((response: string) => {
@@ -38,6 +40,12 @@ document.addEventListener('listPageLoaded', async () => {
                 mduiList.appendChild(subheader); // 添加子标题
                 mduiList.appendChild(listContainer); // 添加列表项
             }
+            loadingTip.style.opacity = "0";
+            setTimeout(() => {
+                hide(loadingTip);
+                mduiList.style.opacity = "1";
+            }, 100)
+            show(mduiList);
         })
         .catch((error) => {
             logHelper.error(error);
@@ -46,6 +54,7 @@ document.addEventListener('listPageLoaded', async () => {
             errorElement.style.textAlign = 'center';
             errorElement.innerHTML = `加载列表时出现问题：<code>${error}</code></p>`
             document.querySelector<HTMLDivElement>('#container')!.appendChild(errorElement);
+            hide(loadingTip);
             hide(mduiList);
         })
 });

src/settings/index.ts

@@ -9,10 +9,10 @@ import type { Button } from 'mdui/components/button.js';
 import type { Dialog } from 'mdui/components/dialog.js';
 import type { ListItem } from 'mdui/components/list-item.js';
 
-import { showClearAllDataDialog } from '../utils/notices';
-import { getFile } from '../utils/network';
 import { QuestionnairesList } from '../interfaces';
 import { LogHelper } from '../utils/LogHelper';
+import { getFile } from '../utils/network';
+import { showClearAllDataDialog } from '../utils/notices';
 
 const logHelper = LogHelper.getInstance();
 

src/test/index.ts

@@ -16,11 +16,11 @@ import '@mdui/icons/check--outlined.js';
 import { RadioGroup } from 'mdui/components/radio-group.js';
 import { ButtonType, Criterion, GroupedData, QuestionnaireFile, QuestionResult, Ranges, ScoreResult, Scoring } from '../interfaces';
 import { hide, show } from '../utils/element';
+import { LogHelper } from '../utils/LogHelper';
+import { getFile } from '../utils/network';
 import { showKeyboardNotice } from '../utils/notices';
 import { Question } from './question';
 import { getScore, SCL90Score } from './scoring';
-import { LogHelper } from '../utils/LogHelper';
-import { getFile } from '../utils/network';
 
 const appTitle: TopAppBarTitle = document.querySelector('#appTitle')!;
 const url: URL = new URL(window.location.href);
@@ -29,9 +29,9 @@ const backBtn: ButtonIcon = document.querySelector('#backBtn')!;
 const logHelper = LogHelper.getInstance();
 
 let nextButtonType: number = 1; // 1: 下一题 | 2: 开始 | 3: 提交
-let currentQuestion: number = 0;
+let currentQuestion: number = 0; // 当前题目
 
-let questions = [];
+let questions = []; // 所有题目对象
 
 const buttonType: ButtonType[] = [
     {
@@ -67,15 +67,26 @@ document.addEventListener('testPageLoaded', async () => {
     const introPart: HTMLDivElement = document.querySelector('#introPart')!;
     const resultArea: HTMLDivElement = document.querySelector('#resultArea')!;
 
+    // 首先判断有没有试题，减少不必要的网络请求
+    if (questionnaire === null) {
+        hide(loadingTip);
+        show(nullTip);
+        return;
+    }
+
     // 将“下一题”按钮设置为“开始”
     setUpNextButton(nextBtn, 2);
 
     // 获取量表json
     getFile(`https://cdn.jsdelivr.net/gh/Super12138/AY-Questionnaires-DB@main/questionnaires/${questionnaire}.json?${new Date().getTime()}`)
         .then((response: string) => {
             // 加载完了显示答题页面，隐藏加载提示
+            loadingTip.style.opacity = "0";
+            setTimeout(() => {
+                hide(loadingTip);
+                container.style.opacity = "1";
+            }, 100)
             show(container);
-            hide(loadingTip);
             const json: QuestionnaireFile = JSON.parse(response); // 解析量表json
             const jsonName: string = json.name;
             appTitle.textContent = jsonName; // 将标题设置为问卷名称
@@ -293,16 +304,10 @@ document.addEventListener('testPageLoaded', async () => {
 
         })
         .catch((error: any) => {
-            if (questionnaire === null) {
-                hide(container);
-                show(nullTip);
-                return;
-            } else {
-                hide(container);
-                nullTip.innerHTML = `错误：<code>${error}</code>`;
-                show(nullTip);
-                return;
-            }
+            hide(container);
+            nullTip.innerHTML = `错误：<code>${error}</code>`;
+            show(nullTip);
+            return;
         });
 });