From 73b3a119eb7b72bf78fdc02747652beac6d0aba2 Mon Sep 17 00:00:00 2001
From: Alexey Suprun <alexey.suprun.mail@gmail.com>
Date: Tue, 21 Jan 2025 21:31:27 +0100
Subject: [PATCH 1/2] fix: resolve hydration errors

Resolves hydration errors by reworking link generation approach
---
 app/components/ParametersForm/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/ParametersForm/index.tsx b/app/components/ParametersForm/index.tsx
index 9a2ffe6..6b96d58 100644
--- a/app/components/ParametersForm/index.tsx
+++ b/app/components/ParametersForm/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -17,6 +17,7 @@ export default function ParametersForm({
   };
 }) {
   const simulationModalRef = useRef<HTMLDialogElement>(null);
+  const [generatedResultURL, setGeneratedResultURL] = useState<string>();
 
   const {
     register,
@@ -35,6 +36,7 @@ export default function ParametersForm({
   }, [stationsConfiguration]);
 
   const onSubmit = async (data: ParametersFormData) => {
+    setGeneratedResultURL(generateRandomURL());
     sessionStorage.setItem('simulationParams', JSON.stringify(data));
     if (simulationModalRef.current) {
       simulationModalRef.current.showModal();
@@ -105,7 +107,7 @@ export default function ParametersForm({
             <p className="mb-10 text-lg">Your simulation report was successfully generated.</p>
 
             <Link
-              href={`/simulation/${generateRandomURL()}`}
+              href={`/simulation/${generatedResultURL}`}
               className="btn bg-brand-dark-blue hover:bg-brand-blue"
             >
               Check the report

From 3055fb8f416481296866c47b698b726fa964adec Mon Sep 17 00:00:00 2001
From: Alexey Suprun <alexey.suprun.mail@gmail.com>
Date: Tue, 21 Jan 2025 21:50:47 +0100
Subject: [PATCH 2/2] feat: add a fake delay on a fake report generation

---
 app/components/ParametersForm/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/ParametersForm/index.tsx b/app/components/ParametersForm/index.tsx
index 6b96d58..ab08c8b 100644
--- a/app/components/ParametersForm/index.tsx
+++ b/app/components/ParametersForm/index.tsx
@@ -18,6 +18,7 @@ export default function ParametersForm({
 }) {
   const simulationModalRef = useRef<HTMLDialogElement>(null);
   const [generatedResultURL, setGeneratedResultURL] = useState<string>();
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
 
   const {
     register,
@@ -36,8 +37,12 @@ export default function ParametersForm({
   }, [stationsConfiguration]);
 
   const onSubmit = async (data: ParametersFormData) => {
-    setGeneratedResultURL(generateRandomURL());
     sessionStorage.setItem('simulationParams', JSON.stringify(data));
+    // Creates a fake 1 second processing delay
+    setIsProcessing(true);
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    setIsProcessing(false);
+    setGeneratedResultURL(generateRandomURL());
     if (simulationModalRef.current) {
       simulationModalRef.current.showModal();
     }
@@ -97,7 +102,8 @@ export default function ParametersForm({
           type="submit"
           disabled={!isValid}
         >
-          Prepare Report
+          {isProcessing && <span className="loading loading-spinner"></span>}
+          {isProcessing ? 'Generating...' : 'Prepare Report'}
         </button>
       </Form>
       <Modal modalRef={simulationModalRef}>