Cycle Sponsor Logos and Optimize Styling (betaflight#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

@@ -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>
+ );
 }

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;
 }