From 4deca5056f329f878f9bc144c553e3d00a9f48cb Mon Sep 17 00:00:00 2001
From: arch0Xd <71967828+arch0Xd@users.noreply.github.com>
Date: Sun, 14 Aug 2022 18:50:46 +0200
Subject: [PATCH] swr

---
 components/Loading.tsx |  7 +++++++
 package-lock.json      | 17 +++++++++++++++++
 package.json           |  1 +
 pages/index.tsx        | 21 ++++++++-------------
 4 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 components/Loading.tsx

diff --git a/components/Loading.tsx b/components/Loading.tsx
new file mode 100644
index 0000000..7e13915
--- /dev/null
+++ b/components/Loading.tsx
@@ -0,0 +1,7 @@
+export const Loading = () => {
+    return(
+        <div className='fixed h-[85vh] w-screen flex justify-center items-center'>
+            <div className='animate-spin w-16 h-16 border-4 border-t-transparent border-l-transparent border-r-black border-b-black dark:border-r-white dark:border-b-white rounded-full' role='status' />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 24c5283..d1d9bef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react-hot-toast": "^2.3.0",
         "react-icons": "^4.4.0",
         "sass": "^1.54.4",
+        "swr": "^1.3.0",
         "tailwindcss": "^3.1.8",
         "typescript": "4.7.4"
       }
@@ -1283,6 +1284,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -2203,6 +2213,13 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "dev": true,
+      "requires": {}
+    },
     "tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
diff --git a/package.json b/package.json
index 17b5201..5027508 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "react-hot-toast": "^2.3.0",
     "react-icons": "^4.4.0",
     "sass": "^1.54.4",
+    "swr": "^1.3.0",
     "tailwindcss": "^3.1.8",
     "typescript": "4.7.4"
   }
diff --git a/pages/index.tsx b/pages/index.tsx
index c547b6c..579d3a6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,17 +1,23 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
+import useSWR from 'swr'
 
 import { socials } from 'components/data/socials'
 import { Icon } from 'components/Icon' 
 import { Footer } from 'components/Footer'
+import { Loading } from 'components/Loading'
 
 import { Toaster } from 'react-hot-toast'
 import { FaSpotify } from 'react-icons/fa'
 
-import { GetServerSideProps } from 'next'
+const fetcher = (url: RequestInfo) => fetch(url).then(r => r.json())
+
+export default function() {
+    const { data: spotify } = useSWR('/api/spotify', fetcher)
+
+    if(!spotify) return <Loading />
 
-export default function({ spotify }: any) {
     return(
         <>
             <div className='px-8 w-11/12 m-auto rounded-lg max-w-4xl'>
@@ -39,7 +45,6 @@ export default function({ spotify }: any) {
 
                             : <a className='text-[#32a866]'> nothing</a>
                         }
-
                     </p>
                 </div>
 
@@ -54,14 +59,4 @@ export default function({ spotify }: any) {
             <Toaster />
         </>
     )
-}
-
-export const getServerSideProps: GetServerSideProps = async () => {
-    const spotify = await fetch(`${process.env.PRODUCTION}/api/spotify`, {
-        method: 'GET'
-    }).then((res) => res.json())
-
-    return {
-        props: { spotify }
-    }
 }
\ No newline at end of file