diff --git a/package-lock.json b/package-lock.json
index 3934e37..e099925 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -926,6 +926,45 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz",
       "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA=="
     },
+    "@emotion/cache": {
+      "version": "10.0.19",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz",
+      "integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.3",
+        "@emotion/stylis": "0.8.4",
+        "@emotion/utils": "0.11.2",
+        "@emotion/weak-memoize": "0.2.4"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.21",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.21.tgz",
+      "integrity": "sha512-U9zbc7ovZ2ceIwbLXYZPJy6wPgnOdTNT4jENZ31ee6v2lojetV5bTbCVk6ciT8G3wQRyVaTTfUCH9WCrMzpRIw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.17",
+        "@emotion/css": "^10.0.14",
+        "@emotion/serialize": "^0.11.10",
+        "@emotion/sheet": "0.9.3",
+        "@emotion/utils": "0.11.2"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.14",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.14.tgz",
+      "integrity": "sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==",
+      "requires": {
+        "@emotion/serialize": "^0.11.8",
+        "@emotion/utils": "0.11.2",
+        "babel-plugin-emotion": "^10.0.14"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz",
+      "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw=="
+    },
     "@emotion/is-prop-valid": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz",
@@ -939,11 +978,43 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz",
       "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow=="
     },
+    "@emotion/serialize": {
+      "version": "0.11.11",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.11.tgz",
+      "integrity": "sha512-YG8wdCqoWtuoMxhHZCTA+egL0RSGdHEc+YCsmiSBPBEDNuVeMWtjEWtGrhUterSChxzwnWBXvzSxIFQI/3sHLw==",
+      "requires": {
+        "@emotion/hash": "0.7.3",
+        "@emotion/memoize": "0.7.3",
+        "@emotion/unitless": "0.7.4",
+        "@emotion/utils": "0.11.2",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz",
+      "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz",
+      "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ=="
+    },
     "@emotion/unitless": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
       "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
     },
+    "@emotion/utils": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz",
+      "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz",
+      "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA=="
+    },
     "@hapi/address": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.1.tgz",
@@ -2180,6 +2251,23 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.21",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.21.tgz",
+      "integrity": "sha512-03o+T6sfVAJhNDcSdLapgv4IeewcFPzxlvBUVdSf7o5PI57ZSxoDvmy+ZulVWSu+rOWAWkEejNcsb29TuzJHbg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.7.3",
+        "@emotion/memoize": "0.7.3",
+        "@emotion/serialize": "^0.11.11",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
@@ -4286,8 +4374,7 @@
     "csstype": {
       "version": "2.6.6",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
-      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==",
-      "dev": true
+      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg=="
     },
     "cyclist": {
       "version": "1.0.1",
@@ -6001,6 +6088,11 @@
         "pkg-dir": "^3.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -11565,6 +11657,14 @@
         }
       }
     },
+    "react-spinners": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.6.1.tgz",
+      "integrity": "sha512-bMCOvwAlzuIDC6Zh69E1EbyKUbvWSl4sMzLXOgnsF4Q/kkAnCNaonWyskMFytbaJSYxBCCOiaeCH2moDJ5y5Pg==",
+      "requires": {
+        "@emotion/core": "^10.0.15"
+      }
+    },
     "react-syntax-highlighter": {
       "version": "10.3.5",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-10.3.5.tgz",
diff --git a/package.json b/package.json
index 20dc8b5..15c26ee 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.1",
+    "react-spinners": "^0.6.1",
     "styled-components": "^4.4.0"
   },
   "scripts": {
diff --git a/src/components/Ticketmaster.js b/src/components/Ticketmaster.js
index d951406..2336fd1 100644
--- a/src/components/Ticketmaster.js
+++ b/src/components/Ticketmaster.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ClipLoader from 'react-spinners/ClipLoader';
 import Styled from 'styled-components';
 
 const api_key = '7elxdku9GGG5k8j0Xm8KWdANDgecHMV0';
@@ -131,6 +132,11 @@ const TopBtn = Styled.button`
   }
 `;
 
+const LoaderContainer = Styled.div`
+text-align: center;
+margin-top: 30px;
+`;
+
 const initialData = { _embedded: { events: [] }, page: {} };
 
 const Ticketmaster = function() {
@@ -138,10 +144,12 @@ const Ticketmaster = function() {
   const [data, setData] = useState(initialData);
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(0);
+  const [loading, setLoading] = useState(false);
   const topBtnEl = useRef();
 
   useEffect(() => {
     const fetchData = async () => {
+      setLoading(true);
       try {
         const query_url = full_url + '&keyword=' + search + '&page=' + page;
         const response = await fetch(query_url);
@@ -152,18 +160,16 @@ const Ticketmaster = function() {
             : {
                 ...result,
                 _embedded: {
-                  events: [
-                    ...data._embedded.events,
-                    ...result._embedded.events,
-                  ],
-                },
+                  events: [...data._embedded.events, ...result._embedded.events]
+                }
               }
         );
+        setLoading(false);
       } catch (error) {
+        setLoading(false);
         console.log(error);
       }
     };
-
     fetchData();
   }, [search, page]);
 
@@ -245,42 +251,58 @@ const Ticketmaster = function() {
           Search
         </SearchButton>
       </SearchGroup>
-      <ResultTable>
-        <tbody>
-          {data._embedded.events.map(tmevent => (
-            <tr key={tmevent.id}>
-              <td>{tmevent.name}</td>
-              <td>
-                {createDateLocation(
-                  tmevent.dates.start.localDate,
-                  tmevent._embedded.venues[0].name
-                )}
-              </td>
-              <td>{createCityState(tmevent)}</td>
-              <td>
+      <LoaderContainer>
+        <ClipLoader
+          sizeUnit="px"
+          size={150}
+          color="#123abc"
+          loading={loading}
+        />
+      </LoaderContainer>
+      {loading ? null : (
+        <div>
+          <ResultTable>
+            <tbody>
+              {data._embedded.events.map(tmevent => (
+                <tr key={tmevent.id}>
+                  <td>{tmevent.name}</td>
+                  <td>
+                    {createDateLocation(
+                      tmevent.dates.start.localDate,
+                      tmevent._embedded.venues[0].name
+                    )}
+                  </td>
+                  <td>{createCityState(tmevent)}</td>
+                  <td>
+                    <a
+                      href={tmevent.url}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      Buy Tickets
+                    </a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </ResultTable>
+          <ResultListMobile>
+            {data._embedded.events.map(tmevent => (
+              <li key={tmevent.id}>
                 <a href={tmevent.url} rel="noopener noreferrer" target="_blank">
-                  Buy Tickets
+                  {tmevent.name}
                 </a>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </ResultTable>
-      <ResultListMobile>
-        {data._embedded.events.map(tmevent => (
-          <li key={tmevent.id}>
-            <a href={tmevent.url} rel="noopener noreferrer" target="_blank">
-              {tmevent.name}
-            </a>
-          </li>
-        ))}
-      </ResultListMobile>
-      {page < totalPages - 1 && (
-        <Pagination role="navigation" aria-label="Pagination">
-          <button onClick={nextPage} disabled={page === totalPages - 1}>
-            Load More
-          </button>
-        </Pagination>
+              </li>
+            ))}
+          </ResultListMobile>
+          {page < totalPages - 1 && (
+            <Pagination role="navigation" aria-label="Pagination">
+              <button onClick={nextPage} disabled={page === totalPages - 1}>
+                Load More
+              </button>
+            </Pagination>
+          )}
+        </div>
       )}
       <TopBtn ref={topBtnEl} onClick={gotoTop}>
         Top