Update app.py

app.py

@@ -84,31 +84,30 @@ with gr.Blocks() as demo:
     submit = gr.Button("Generate Design")
     output = gr.Markdown(label="Output")
 
-    spinner = gr.HTML(
-        """
-        <div id="loading" style="display: none; text-align: center;">
-            <svg width="40" height="40" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-                <circle cx="50" cy="50" fill="none" stroke="#4fa94d" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
-                    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
-                </circle>
-            </svg>
-            <p>Generating...</p>
-        </div>
-        """,
-        visible=False
-    )
+    status = gr.Markdown(visible=False)
 
-    def wrapper(*args):
-        spinner.update(visible=True)
-        result = generate_software_spec(*args)
-        spinner.update(visible=False)
-        output.update(value=result)
+    def wrapper(name, description, architecture, components, deployment, platform, extra):
+        status_text = "<center>⏳ Generating... Please wait.</center>"
+        result = generate_software_spec(name, description, architecture, components, deployment, platform, extra)
         return result, gr.update(visible=False)
 
     submit.click(
         fn=wrapper,
         inputs=[name, description, architecture, components, deployment, platform, extra],
-        outputs=[output, spinner]
+        outputs=[output, status],
+        preprocess=False,
+        postprocess=False,
+        show_progress=True
+    )
+
+    def show_spinner():
+        return gr.update(visible=True, value="<center>⏳ Generating... Please wait.</center>")
+
+    submit.click(
+        fn=show_spinner,
+        inputs=[],
+        outputs=[status],
+        queue=False
     )
 
-    demo.launch()
+    demo.launch()