Add style for loading spinner

crs_arena/arena.py

@@ -6,10 +6,10 @@ All the conversations are recorded and saved for future analysis. When the user
 arrives on the app, they are assigned a unique ID. Then, two CRSs are chosen
 for the battle depending on the number of conversations already recorded (i.e.,
 the CRSs with the least number of conversations are chosen). The user interacts
-with the CRSs one after the other. The user can then vote on which CRS they prefer,
-upon voting a pop-up will appear giving the user the option to provide a more
-detailed feedback. Once the vote is submitted, all data is logged and the app
-restarts for a new battle.
+with the CRSs one after the other. The user can then vote on which CRS they
+prefer, upon voting a pop-up will appear giving the user the option to provide
+a more detailed feedback. Once the vote is submitted, all data is logged and
+the app restarts for a new battle.
 
 The app is composed of four sections:
 1. Title/Introduction
@@ -68,7 +68,8 @@ def record_vote(vote: str) -> None:
     crs2_model: CRSFighter = st.session_state["crs2"]
     last_row_id = str(datetime.now())
     logger.info(
-        f"Vote: {last_row_id}, {user_id}, {crs1_model.name}, {crs2_model.name}, {vote}"
+        f"Vote: {last_row_id}, {user_id}, {crs1_model.name}, {crs2_model.name}"
+        f", {vote}"
     )
     asyncio.run(
         upload_feedback_to_gsheet(
@@ -272,6 +273,19 @@ def chat_col(crs_id: int, color: str):
 # Streamlit app
 st.set_page_config(page_title="CRS Arena", layout="wide")
 
+# Add style for spinner
+st.markdown(
+    """<style>
+            .stSpinner {
+                font-size: 2em;
+                 display: flex;
+                 justify-content: center;
+                 align-items: center;
+            }
+        </style>
+    """,
+    unsafe_allow_html=True,
+)
 # Cache some CRS fighters at startup
 cache_fighters()
 
@@ -294,8 +308,8 @@ st.write(
     "* Chat with each CRS (one after the other) to get **movie recommendations** "
     "up until you feel statisfied or frustrated.\n"
     "* Please be patient as some CRSs may take a few seconds to respond.\n"
-    "* Try to send several messages to each CRS to get a better sense of their "
-    "capabilities. Don't quit after the first message!\n"
+    "* Try to send several messages to each CRS to get a better sense of their"
+    " capabilities. Don't quit after the first message!\n"
     "* To finish chatting with a CRS, click on the button corresponding to "
     "your feeling: frustrated or satisfied.\n"
     "* Vote on which CRS you prefer or declare a tie.\n"
@@ -363,11 +377,11 @@ container_col3.button(
 # Terms of service
 st.header("Terms of Service")
 st.write(
-    "By using this application, you agree to the following terms of service:  \n"
+    "By using this application, you agree to the following terms of service:\n"
     "The service is a research platform. It may produce offensive content. "
     "Please do not upload any private information in the chat. The service "
-    "collects the chat data and the user's vote, which may be released under a "
-    "Creative Commons Attribution (CC-BY) or a similar license."
+    "collects the chat data and the user's vote, which may be released under a"
+    " Creative Commons Attribution (CC-BY) or a similar license."
 )
 
 # Contact information