Fix spinner with new UI

app.py

@@ -94,6 +94,11 @@ st.header('Your Itinerary')
 # Create a loading spinner
 loading_spinner = st.spinner("Generating itinerary...")
 
+# Read custom CSS from the external file
+with open("styles.css", "r") as css_file:
+    custom_css = css_file.read()
+
+
 if submit:
     missing_fields = []
 
@@ -133,15 +138,17 @@ if submit:
             'accommodation': accommodation,
             'schedule': schedule
         }
+
         # Display loading spinner while generating the itinerary
         with loading_spinner:
+
+            # Apply custom CSS to the spinner only
+            st.markdown(f"<style>{custom_css}</style>", unsafe_allow_html=True)
             
             # Call the generate_itinerary method (without artificial delay)
             itinerary_result = agent.generate_itinerary(user_details)
 
             if itinerary_result and itinerary_result["itinerary_suggestion"]:
-                # Remove the loading spinner
-                loading_placeholder.empty()
 
                 # Display the itinerary and other information (same as before)
                 st.subheader("Itinerary Suggestion")
@@ -150,17 +157,24 @@ if submit:
                 st.write("Validation Dict:", itinerary_result["validation_dict"])
 
             elif itinerary_result and itinerary_result["itinerary_suggestion"] is None:
-                # Remove the loading spinner
-                loading_placeholder.empty()
 
                 # Display a message for unrealistic edge cases (same as before)
-                st.error("The travel plan is not valid.")
+                st.markdown(
+                    """<div style='background-color:#ffebeb; padding:10px; border-radius:5px;'>
+                    <p style='color:#ff0000; font-weight:bold;'>Error: The travel plan is not valid.</p>
+                    <p>Please review your input and try again.</p>
+                    </div>""",
+                    unsafe_allow_html=True
+                )
             else:
-                # Remove the loading spinner
-                loading_placeholder.empty()
 
-                # Handle other errors (same as before)
-                st.error("An error occurred while generating the itinerary.")
+                st.markdown(
+                    """<div style='background-color:#ffebeb; padding:10px; border-radius:5px;'>
+                    <p style='color:#ff0000; font-weight:bold;'>An error occurred while generating the itinerary.</p>
+                    <p>Please try again later or contact support.</p>
+                    </div>""",
+                    unsafe_allow_html=True
+                )
 
         note = """Here is your personalized travel itinerary covering all the major locations you want to visit. 
         This map gives you a general overview of your travel route from start to finish. 

style.css

@@ -0,0 +1,12 @@
+/* styles.css */
+.st-spinner > div > div > svg {
+    width: 100px;
+    height: 100px;
+}
+
+.st-spinner {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}