perf: avoid layout re-rendering

components/custom/tiles/components/tile.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsTileSchema } from '../../../../utils/schemas';
+import { TileContent } from './tileContent';
+
+type CardProps = {
+  newsA?: z.infer<typeof NewsTileSchema>;
+  newsB?: z.infer<typeof NewsTileSchema>;
+};
+
+export function Tile({ newsA, newsB }: CardProps) {
+  const [switched, setSwitched] = useState(false);
+  const [active, setActive] = useState(Math.random() < 0.5);
+  const [delayed, setDelayed] = useState(true);
+
+  useEffect(() => {
+    const randomDelay = Math.floor(Math.random() * 10000);
+
+    const interval = setInterval(
+      () => {
+        setSwitched(true);
+
+        window.setTimeout(function () {
+          setSwitched(false);
+          setActive(!active);
+          setDelayed(false);
+        }, 500 / 2);
+      },
+      delayed ? randomDelay : randomDelay + 10000
+    );
+
+    return () => clearInterval(interval);
+  }, [active, delayed]);
+
+  if (!newsA || !newsB) return <div></div>;
+
+  return (
+    <div className={`transform ${switched ? 'animate-rotate' : ''}`}>
+      <div className='transform-gpu'>
+        <div className={`absolute left-0 top-0 w-full ${''}`}>
+          {active
+            ? TileContent({ story: newsA, side: true })
+            : TileContent({ story: newsB, side: false })}
+        </div>
+      </div>
+    </div>
+  );
+}

components/custom/tiles/components/tileContent.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { z } from 'zod';
+import { getRandomGrey } from '../../../../utils/getRandomGrey';
+import { NewsTileSchema } from '../../../../utils/schemas';
+
+type CardContentProps = {
+  story: z.infer<typeof NewsTileSchema>;
+  side: boolean;
+};
+
+export function TileContent({ story, side }: CardContentProps) {
+  const [firstColor, setFirstColor] = useState(getRandomGrey());
+  const [secondColor, setSecondColor] = useState(getRandomGrey());
+  const [switched, setSwitched] = useState(true);
+
+  if (switched !== side) {
+    setFirstColor(getRandomGrey());
+    setSecondColor(getRandomGrey());
+
+    setSwitched(side);
+  }
+
+  const color = side ? firstColor : secondColor;
+
+  return (
+    <div
+      className={`h-40 w-40 overflow-hidden rounded-lg p-6 shadow-sm`}
+      style={{
+        backgroundColor: `${color}`,
+        color: '#808080'
+      }}
+    >
+      <h1 className='overflow-auto font-semibold'>{story.title}</h1>
+      <p className='overflow-auto italic'>by {story.by}</p>
+      <div
+        className='rounded-lg'
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '33.33%',
+          background: `linear-gradient(to bottom, transparent, ${color})`
+        }}
+      ></div>
+    </div>
+  );
+}

components/custom/tiles/tiles.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { NewsTile, NewsTileSchema } from '../../../utils/schemas';
+import { Tile } from './components/tile';
+
+type TilesProps = {
+  children: React.ReactNode;
+};
+
+export const Tiles = ({ children }: TilesProps) => {
+  const pathname = usePathname();
+  const [windowSize, setWindowSize] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0
+  });
+  const [news, setNews] = useState<z.infer<typeof NewsTileSchema>[]>();
+
+  useEffect(() => {
+    async function getNews() {
+      const news: NewsTile[] = await fetch('/api/news').then(res => res.json());
+
+      if (news) {
+        setNews(news);
+      }
+    }
+
+    if (!news) {
+      getNews();
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [setWindowSize, news]);
+
+  if (pathname === '/maintenance') return <div>{children}</div>;
+
+  function renderTile(key: number) {
+    if (!news) return <div key={key}></div>;
+
+    const randomA = Math.floor(Math.random() * news?.length);
+    const randomB = Math.floor(
+      Math.random() * news?.filter((_, index) => index !== randomA)?.length
+    );
+
+    return (
+      <div key={key} className={`m-1 h-40 w-40`}>
+        <Tile newsA={news[randomA]} newsB={news[randomB]} />
+      </div>
+    );
+  }
+
+  function renderRow(columns: number, key: number) {
+    return (
+      <div key={key} className='flex justify-between'>
+        {Array.from({ length: columns }).map((_, index) => renderTile(index))}
+      </div>
+    );
+  }
+
+  function renderGrid() {
+    const columns = Math.ceil(windowSize.width / (40 * 4));
+    const rows = Math.ceil(windowSize.height / (40 * 4));
+
+    return (
+      <div>
+        <div className='-ml-12 -mt-10 flex flex-col justify-between'>
+          {Array.from({ length: rows }).map((_, index) =>
+            renderRow(columns, index)
+          )}
+        </div>
+        <div className='absolute inset-0 flex items-center justify-center'>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
+};