Add setLoading function to toggle rendering of the LoadingSpinner com…

…ponent.

Refactored LoadingSpinner component to display under the Latest Opportunities heading to reflect more the intent of the loading spinner.

src/pages/Home.js

@@ -10,7 +10,7 @@ import LoadingSpinner from '../components/LoadingSpinner'
 
 const Home = () => {
   const [jobs, setJobs] = useState([])
-  const [loading] = useState(true)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     ;(async function retrieveJobs() {
@@ -35,6 +35,7 @@ const Home = () => {
         }
       })
       setJobs(jobList)
+      setLoading(false)
     })()
   }, [])
 
@@ -78,8 +79,6 @@ const Home = () => {
                 learn.
               </p>
 
-              <LoadingSpinner loading={loading}/>
-
               <button className='btn btn-teal mx-auto'>
                 <Link to='/job-board'>Find a Job</Link>
               </button>
@@ -103,6 +102,8 @@ const Home = () => {
               Latest Opportunities
             </h2>
 
+            <LoadingSpinner loading={loading}/>
+
             <div data-cy='job-card-container' className='container'>
               {jobs.slice(0, 6).map((job, index) => (
                 <JobCard key={job.id} job={job} />