refactor(challenge): Improve UX of placeholder

Author: pan93412

assets/styles/app.scss

@@ -413,3 +413,21 @@ ul.credit {
     grid-area: leaderboard;
   }
 }
+
+// The placeholder that shows only after 100ms
+// to prevent the flickering.
+.app-placeholder {
+  animation: fade-in 200ms;
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

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

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

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

@@ -21,7 +21,7 @@
 </div>
 
 {% macro placeholder(props) %}
-    <div class="alert alert-info d-flex gap-3 align-items-center">
+    <div class="app-placeholder alert alert-info d-flex gap-3 align-items-center">
         <div class="spinner-grow" role="status" aria-hidden="true"></div>
         <div>正在取回答案⋯⋯</div>
     </div>