refactor(challenge): Add loading to deferred result

Author: pan93412

templates/components/Challenge/ColumnsOfAnswer.html.twig

@@ -1,5 +1,11 @@
 <p {{ attributes }}>
-    <strong>輸出格式：</strong>欄位順序分別為：<code>{{
+    <strong>輸出格式：</strong>欄位順序分別為 <code>{{
         this.columnsOfAnswer|joinToQuoted('、')
         }}</code>。
 </p>
+
+{% macro placeholder(props) %}
+    <p>
+        <strong>輸出格式：</strong>欄位順序分別為
+    </p>
+{% endmacro %}

templates/components/Challenge/Tabs/DiffPresenter.html.twig

@@ -171,3 +171,10 @@
         </div>
     {% endif %}
 </div>
+
+{% macro placeholder(props) %}
+    <div class="alert alert-info d-flex gap-3 align-items-center">
+        <div class="spinner-grow" role="status" aria-hidden="true"></div>
+        <div>正在進行比較⋯⋯</div>
+    </div>
+{% endmacro %}

templates/components/Challenge/Tabs/UserQueryResult.html.twig

@@ -16,6 +16,13 @@
     {% endif %}
 
     {% if result is not null and result.result %}
-        <twig:Challenge:Tabs:QueryResultTable :result="result.result" />
+        <twig:Challenge:Tabs:QueryResultTable :result="result.result"/>
     {% endif %}
 </div>
+
+{% macro placeholder(props) %}
+    <div class="alert alert-info d-flex gap-3 align-items-center">
+        <div class="spinner-grow" role="status" aria-hidden="true"></div>
+        <div>正在取回答案⋯⋯</div>
+    </div>
+{% endmacro %}