Fix Download page re-rendering and preload builds from API

The `useSWR` API was being used incorrectly which broke preloading and would trigger the preloader animation to happen a lot more than necessary. In addition to that, we were also missing the opportunity to preload the builds JSON from the API.

Author: PixelyIon

src/pages/download.js

@@ -13,22 +13,22 @@ import useSWR from "swr";
 import config from "../config";
 
 const IndexPage = () => {
-    const { data, isValidating } = useSWR("get-builds", async () => {
-        const res = await axios.get(config.builds_api_url);
-        console.log(res.status, res.data);
-        return res.data;
-    });
+    const { data } = useSWR(
+        config.builds_api_url, 
+        (url) => axios.get(url).then(r => r.data)
+    );
 
     return (
         <Layout title="Download Skyline - Nintendo Switch Emulator">
+            <link rel="preload" href={config.builds_api_url} as="fetch" crossorigin="anonymous"/>
             <div className="w-full min-h-screen pb-0 md:pb-20 dark:bg-darkBackground">
                 <div className="flex items-center justify-between">
                     <div className="px-8 py-12 mx-auto md:py-18 max-w-page">
                         <div className="pt-4 mx-auto text-center md:max-w-xl lg:max-w-3xl">
                             <h3 className="mb-6 text-3xl font-bold text-black dark:text-white">Builds</h3>
                             <p className="pb-2 mb-6 font-semibold text-blue-500 md:mb-12 md:pb-0">Click on Download to download the apk file for the emulator.</p>
                         </div>
-                        {isValidating ? (
+                        {data === undefined ? (
                             <Preloader />
                         ) : (
                             data.map((build, idx) => {