Update app.py

app.py

@@ -35,6 +35,9 @@ if 'page_loaded' not in st.session_state:
     # Reset query state when returning to home page
     st.session_state.last_query = ""
     st.session_state.last_answer = None
+# Add placeholder initialization tracking
+if 'placeholders_initialized' not in st.session_state:
+    st.session_state.placeholders_initialized = False
 
 # THEN: Import your modules
 from rag_engine import process_query, load_model, cached_load_data_files
@@ -207,10 +210,37 @@ div.stInfo {
 .source-link:hover {
     color: #6a1b9a;
 }
+/* Prevent layout shifts during loading */
+.stApp {
+    min-height: 100vh;
+}
+/* Add smooth transitions to reduce perceived jerkiness */
+* {
+    transition: opacity 0.15s ease-in-out;
+}
+/* Fix heights for containers that might change during loading */
+div.stSpinner {
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+/* Ensure question and answer containers have consistent height */
+div.stInfo, .answer-container {
+    min-height: 30px;
+}
 </style>
 <div class="main-title">Spirituality Q&A</div>
 """, unsafe_allow_html=True)
 
+# Initialize placeholders at the start
+if not st.session_state.placeholders_initialized:
+    st.session_state.question_placeholder = st.empty()
+    st.session_state.slider_placeholder = st.empty()
+    st.session_state.answer_placeholder = st.empty()
+    st.session_state.sources_placeholder = st.empty()
+    st.session_state.placeholders_initialized = True
+
 # Centered button layout without columns
 _, center_col, _ = st.columns([1, 2, 1])  # Create a wider center column
 with center_col:  # Put everything in the center column
@@ -279,6 +309,8 @@ def set_query(query):
         return
     st.session_state.last_query = query
     st.session_state.submit_clicked = True
+    st.session_state.is_processing = True
+    st.rerun()
 
 # Function to group questions into rows based on length
 def group_buttons(questions, max_chars_per_row=100):
@@ -333,8 +365,10 @@ def handle_form_submit():
     if st.session_state.query_input and st.session_state.query_input.strip():
         st.session_state.last_query = st.session_state.query_input.strip()
         st.session_state.submit_clicked = True
+        st.session_state.is_processing = True
         # Increment the form key to force a reset
         st.session_state.form_key += 1
+        st.rerun()
 
 # Create a form with a dynamic key (to allow resetting)
 with st.form(key=f"query_form_{st.session_state.form_key}"):
@@ -342,62 +376,52 @@ with st.form(key=f"query_form_{st.session_state.form_key}"):
                           placeholder="Press enter to submit your question", disabled=st.session_state.is_processing)
     submit_button = st.form_submit_button("Get Answer", on_click=handle_form_submit, disabled=st.session_state.is_processing)
 
-# Display the current question if available
+# Display the current question if available using placeholders
 if st.session_state.last_query:
-    st.markdown("### Current Question:")
-    st.info(st.session_state.last_query)
+    with st.session_state.question_placeholder.container():
+        st.markdown("### Current Question:")
+        st.info(st.session_state.last_query)
+else:
+    st.session_state.question_placeholder.empty()
 
-# Sliders for customization
-col1, col2 = st.columns(2)
-with col1:
-    top_k = st.slider("Number of sources:", 3, 10, 5)
-with col2:
-    word_limit = st.slider("Word limit:", 50, 500, 200)
-
-# Create placeholders for answer sections
-answer_container = st.container()
-answer_header = answer_container.empty()
-answer_text = answer_container.empty()
-sources_header = answer_container.empty()
-sources_text = answer_container.empty()
+# Sliders for customization using placeholder
+with st.session_state.slider_placeholder.container():
+    col1, col2 = st.columns(2)
+    with col1:
+        top_k = st.slider("Number of sources:", 3, 10, 5)
+    with col2:
+        word_limit = st.slider("Word limit:", 50, 500, 200)
 
 # Process the query only if it has been explicitly submitted
 if st.session_state.submit_clicked and st.session_state.last_query:
-    # Set processing flag first
-    st.session_state.is_processing = True
-    
-    # Check if we already have an answer to display
-    if st.session_state.last_answer is not None:
-        answer_header.subheader("Answer:")
-        answer_text.write(st.session_state.last_answer["answer_with_rag"])
-        sources_header.subheader("Sources:")
-        sources_text.write(st.session_state.last_answer["citations"])
+    st.session_state.submit_clicked = False
     
-    # Process in the same page load without rerun
-    with st.spinner("Processing your question..."):
-        try:
-            result = process_query(st.session_state.last_query, top_k=top_k, word_limit=word_limit)
-            st.session_state.last_answer = result
-            
-            # Update the display with new results
-            answer_header.subheader("Answer:")
-            answer_text.write(result["answer_with_rag"])
-            sources_header.subheader("Sources:")
-            sources_text.write(result["citations"])
-            
-        except Exception as e:
-            error_result = {"answer_with_rag": f"Error processing query: {str(e)}", "citations": ""}
-            st.session_state.last_answer = error_result
-            
-            # Display the error
-            answer_header.subheader("Answer:")
-            answer_text.write(error_result["answer_with_rag"])
-            sources_header.subheader("Sources:")
-            sources_text.write(error_result["citations"])
+    # Use the answer placeholder for the spinner and answer display
+    with st.session_state.answer_placeholder.container():
+        with st.spinner("Processing your question..."):
+            try:
+                result = process_query(st.session_state.last_query, top_k=top_k, word_limit=word_limit)
+                st.session_state.last_answer = result
+            except Exception as e:
+                st.session_state.last_answer = {"answer_with_rag": f"Error processing query: {str(e)}", "citations": ""}
     
-    # Reset flags after processing is complete
-    st.session_state.submit_clicked = False
+    # Reset processing flag
     st.session_state.is_processing = False
+    st.rerun()  # Still using rerun, but the layout is more stable now
+
+# Display the answer if available using placeholders
+if st.session_state.last_answer is not None:
+    with st.session_state.answer_placeholder.container():
+        st.subheader("Answer:")
+        st.write(st.session_state.last_answer["answer_with_rag"])
+    
+    with st.session_state.sources_placeholder.container():
+        st.subheader("Sources:")
+        for citation in st.session_state.last_answer["citations"].split("\n"):
+            st.write(citation)
+else:
+    st.session_state.answer_placeholder.empty()
+    st.session_state.sources_placeholder.empty()
 
 # Add helpful information
 st.markdown("---")