refactor(challenge): Reduce Twig render time

Make ColumnsOfAnswer deferred.

Author: pan93412

src/Twig/Components/Challenge/ColumnsOfAnswer.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Twig\Components\Challenge;
+
+use App\Entity\Question;
+use App\Service\QuestionDbRunnerService;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class ColumnsOfAnswer
+{
+    use DefaultActionTrait;
+
+    public function __construct(
+        private readonly QuestionDbRunnerService $questionDbRunnerService,
+    ) {
+    }
+
+    #[LiveProp]
+    public Question $question;
+
+    /**
+     * Get the columns of the answer.
+     *
+     * @return string[] the columns of the answer
+     */
+    public function getColumnsOfAnswer(): array
+    {
+        try {
+            $answer = $this->questionDbRunnerService->getAnswerResult($this->question);
+            $answerResult = $answer->getResult();
+
+            if (0 === \count($answerResult)) {
+                return [];
+            }
+
+            return $answer->getResult()[0];
+        } catch (\Throwable $e) {
+            return ["⚠️ Invalid Question: {$e->getMessage()}"];
+        }
+    }
+}

src/Twig/Components/Challenge/Description.php

@@ -5,37 +5,10 @@
 namespace App\Twig\Components\Challenge;
 
 use App\Entity\Question;
-use App\Service\QuestionDbRunnerService;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
 #[AsTwigComponent]
 final class Description
 {
-    public function __construct(
-        private readonly QuestionDbRunnerService $questionDbRunnerService,
-    ) {
-    }
-
     public Question $question;
-
-    /**
-     * Get the columns of the answer.
-     *
-     * @return string[] the columns of the answer
-     */
-    public function getColumnsOfAnswer(): array
-    {
-        try {
-            $answer = $this->questionDbRunnerService->getAnswerResult($this->question);
-            $answerResult = $answer->getResult();
-
-            if (0 === \count($answerResult)) {
-                return [];
-            }
-
-            return $answer->getResult()[0];
-        } catch (\Throwable $e) {
-            return ["⚠️ Invalid Question: {$e->getMessage()}"];
-        }
-    }
 }

templates/components/Challenge/ColumnsOfAnswer.html.twig

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

templates/components/Challenge/Description.html.twig

@@ -3,11 +3,7 @@
         {{ question.description|raw }}
     </div>
 
-    <p>
-        <strong>輸出格式：</strong>欄位順序分別為：<code>{{
-            this.columnsOfAnswer|joinToQuoted('、')
-        }}</code>。
-    </p>
+    <twig:Challenge:ColumnsOfAnswer :question="question" loading="defer" />
 
     {% if question.schema %}
         <p><strong>Schema ({{ question.schema.id }}): </strong>