From a251c3405978fccb1e748a4026f68053001e8a8f Mon Sep 17 00:00:00 2001
From: Benedek Kozma <cyberbeni@gmail.com>
Date: Fri, 16 Feb 2024 00:52:59 +0100
Subject: [PATCH] Change: move custom.css linking to head to avoid FOUC (#2916)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
---
 src/components/filecontent.jsx | 10 ----------
 src/pages/index.jsx            | 12 ++----------
 2 files changed, 2 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/filecontent.jsx

diff --git a/src/components/filecontent.jsx b/src/components/filecontent.jsx
deleted file mode 100644
index 1dd6266a2..000000000
--- a/src/components/filecontent.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import useSWR from "swr";
-
-export default function FileContent({ path, loadingValue, errorValue, emptyValue = "" }) {
-  const fetcher = (url) => fetch(url).then((res) => res.text());
-  const { data, error, isLoading } = useSWR(`/api/config/${path}`, fetcher);
-
-  if (error) return errorValue;
-  if (isLoading) return loadingValue;
-  return data || emptyValue;
-}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 4bf1d9a27..39ac6cf29 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -11,7 +11,6 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useRouter } from "next/router";
 
 import Tab, { slugify } from "components/tab";
-import FileContent from "components/filecontent";
 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
 import Widget from "components/widgets/widget";
@@ -391,17 +390,10 @@ function Home({ initialSettings }) {
         )}
         <meta name="msapplication-TileColor" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
         <meta name="theme-color" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
+        <link rel="preload" href="/api/config/custom.css" as="style" />
+        <link rel="stylesheet" href="/api/config/custom.css" /> {/* eslint-disable-line @next/next/no-css-tags */}
       </Head>
 
-      <link rel="preload" href="/api/config/custom.css" as="fetch" crossOrigin="anonymous" />
-      <style data-name="custom.css">
-        <FileContent
-          path="custom.css"
-          loadingValue="/* Loading custom CSS... */"
-          errorValue="/* Failed to load custom CSS... */"
-          emptyValue="/* No custom CSS */"
-        />
-      </style>
       <Script src="/api/config/custom.js" />
 
       <div className="relative container m-auto flex flex-col justify-start z-10 h-full">