Show loading icon when making request

Author: julesnuggy

index.html

@@ -25,6 +25,10 @@ <h1>ChatVenture</h1>
     <p>Hello PLAYER! Welcome to the text adventure game where the story is made up by GPT :)</p>
   </header>
 
+  <div class="loading hidden">
+    <img src="./images/loader.gif" alt="loading icon">
+  </div>
+
   <div class="genres">
     <button class="genre" data-genre="horror">👻</button>
     <button class="genre" data-genre="spy film">🕵🏻‍</button>

main.js

@@ -15,6 +15,15 @@ const makeRequest = async (url, data) => {
   return response.json();
 }
 
+const showLoadingAnimation = (isLoading) => {
+  const loadingScreen = document.querySelector('.loading');
+  if(isLoading) {
+    loadingScreen.classList.remove('hidden');
+  } else {
+    loadingScreen.classList.add('hidden');
+  }
+}
+
 const startGame = async (genre) => {
   // Message to send to ChatGPT to start the game
   chatGptMessages.push({
@@ -26,6 +35,8 @@ const startGame = async (genre) => {
       'Your responses are just in JSON format like this example:\n\n###\n\n {"setting":"setting description","actions":["action 1", "action 2", "action 3"]}###'
   });
 
+  showLoadingAnimation(true);
+
   // Send request to ChatGPT Chat Completion API
   // https://platform.openai.com/docs/api-reference/chat/create
   const chatJSON = await makeRequest(
@@ -45,6 +56,8 @@ const startGame = async (genre) => {
   const { setting, actions } = content;
   console.log('SETTING:', setting);
   console.log('ACTIONS:', actions);
+
+  showLoadingAnimation(false);
 }
 
 const init = () => {

style.css

@@ -29,6 +29,13 @@ header {
   padding: 32px;
 }
 
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 512px;
+}
+
 .genres {
   display: grid;
   grid-template-columns: repeat(3, 100px);
@@ -52,3 +59,7 @@ header {
   background-color: rgba(255,255,255,0.7);
   border: 4px solid #f1c82d;
 }
+
+.hidden {
+  display: none;
+}