Add loading to usePoetry #4

frontend/src/Components/usePoetry.tsx

@@ -11,14 +11,14 @@ const poets = [
   "Robert Burns",
   "Edward Thomas",
   "Richard Crashaw",
-]
+];
 
 type dataResponse = {
   title: string;
   author: string;
   lines: Array<string>;
   linecount: number;
-}
+};
 
 const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. Enter id and it will retrieve the corresponding poem
   const [poem, setPoem] = useState<Array<string> | null>(null); // The poem itself. Initialized as null
@@ -26,6 +26,9 @@ const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. En
   const [author, setAuthor] = useState("Loading...");
 
   useEffect(() => { // Will run every time the Id changes
+    setPoem(["Loading..."]);
+    setTitle("Loading...");
+    setAuthor("Loading...");
     fetch(`https://poetrydb.org/author,poemcount,linecount/${poets[poetId]};1;4`) // GET request to poetryDb
       .then((response) => response.json()) // Convert response to json
       .then((data: Array<dataResponse>) => {
@@ -36,5 +39,5 @@ const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. En
   }, [poetId]);
 
   return [title, poem, author] as const;
-}
+};
 export default usePoetry;
\ No newline at end of file