Make captcha actually load

app/routes/report.tsx

@@ -39,6 +39,7 @@ export default function () {
   const [supportsRequestStreams, setSupportsRequestStreams] = useState(false);
   const toast = useToast();
   const [uploading, setUploading] = useState(false);
+  const [turnstileToken, setTurnstileToken] = useState("");
 
   useEffect(() => {
     if (sessionStorage.getItem("REPORT_SUCCESS")) {
@@ -182,6 +183,17 @@ export default function () {
 
   const { logged_in, site_key } = useLoaderData<typeof loader>();
 
+  useEffect(() => {
+    if (logged_in) return;
+
+    const script = document.createElement("script");
+    script.async = true;
+    script.defer = true;
+    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+
+    document.body.appendChild(script);
+  }, [logged_in]);
+
   return showSuccess ? (
     <Success
       heading="Report Submitted"
@@ -212,6 +224,7 @@ export default function () {
           <input id="evidence" type="file" />
         </FormControl>
         <br />
+        <div className="cf-turnstile" data-sitekey={site_key}></div>
         <br />
         <Text>
           By submitting this form, you agree to the{" "}
@@ -243,18 +256,7 @@ export default function () {
             ) : null}
           </CircularProgress>
         </HStack>
-        <div
-          className="cf-turnstile"
-          data-sitekey={useLoaderData<typeof loader>()}
-        ></div>
       </Container>
-      {logged_in ? null : (
-        <script
-          src="https://challenges.cloudflare.com/turnstile/v0/api.js"
-          async
-          defer
-        ></script>
-      )}
     </>
   );
 }