From 16e319279077388b05f7bf29cd539ef6940ea63d Mon Sep 17 00:00:00 2001
From: Eike Ahmels <eike.ahmels@tu-dortmund.de>
Date: Mon, 15 Apr 2024 16:41:00 +0200
Subject: [PATCH] Cycle Sponsor Logos and Optimize Styling (#410)

* add 10s cycle to sponsors, optimized some stylings

* suggested changes + transition effect

* 30 seconds cycle

---------

Co-authored-by: Eike Ahmels <ea@weslink.de>
---
 src/components/Sponsors/Sponsors.tsx | 58 ++++++++++++++++++++++++----
 src/css/custom.css                   |  2 +-
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/components/Sponsors/Sponsors.tsx b/src/components/Sponsors/Sponsors.tsx
index dc8c53e491..d53ef02b20 100644
--- a/src/components/Sponsors/Sponsors.tsx
+++ b/src/components/Sponsors/Sponsors.tsx
@@ -1,23 +1,65 @@
 import React, { useState, useEffect } from 'react';
 import { useColorMode } from '@docusaurus/theme-common';
 import { sanitize } from 'dompurify';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+
+const cycleIntervalMs = 30000; // 10 seconds
 
 export default function Sponsors(): React.JSX.Element {
-  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [data, setData] = useState<string | null>(null);
+  const [counter, setCounter] = useState<number>(0);
+  const [seconds, setSeconds] = useState<number>(0);
   const { colorMode } = useColorMode();
 
+  const countUp = (stateFunc: React.Dispatch<React.SetStateAction<number>>, intervalMs: number): (() => void) => {
+    const interval = setInterval(() => {
+      stateFunc((x) => x + 1);
+    }, intervalMs);
+
+    return () => clearInterval(interval);
+  };
+
+  useEffect(() => {
+    return countUp(setCounter, cycleIntervalMs);
+  }, []);
+
+  useEffect(() => {
+    return countUp(setSeconds, cycleIntervalMs / 5);
+  }, []);
+
   async function fetchData(mode: string, page: string): Promise<void> {
     const response = await fetch(`https://build.betaflight.com/api/configurator/sponsors/${mode}/${page}`);
-    setData(await response.text());
+    setLoading(true);
+    setTimeout(async () => {
+      setData(await response.text());
+      setLoading(false);
+    }, 1000);
   }
 
   useEffect(() => {
     fetchData(colorMode, 'landing');
-  }, [colorMode]);
-
-  if (!data) {
-    return <div>Loading...</div>;
-  }
+  }, [colorMode, counter]);
 
-  return <div dangerouslySetInnerHTML={{ __html: sanitize(data) }} />;
+  return (
+    <div>
+      {data ? (
+        <div className={`transition-opacity duration-1000 min-h-[99px] opacity-0 ${loading ? '' : 'opacity-100'}`} dangerouslySetInnerHTML={{ __html: sanitize(data) }} />
+      ) : (
+        <div className="min-h-[99px] text-2xl flex justify-center items-center">
+          <FontAwesomeIcon className="mr-2" icon={faSpinner} spin />
+          Loading...
+        </div>
+      )}
+      <div className="justify-center flex gap-4 mt-4">
+        {[...Array((seconds % 5) + 1)].map((_, i) => (
+          <div key={i} className="transition-all w-4 h-4 rounded-full bg-gray-500/20 border border-transparent" />
+        ))}
+        {[...Array(5 - (seconds % 5) - 1)].map((_, i) => (
+          <div key={i} className="w-4 h-4 rounded-full border bg-transparent border-gray-500/20" />
+        ))}
+      </div>
+    </div>
+  );
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index f7f864a58f..3678f2f341 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -49,5 +49,5 @@ html {
 }
 
 .img_sponsor {
-  @apply h-full px-[10px] max-h-[120px] inline;
+  @apply p-[10px] max-h-[99px] max-w-[330px] inline;
 }