fix(team): stop hydration crash from date-dependent card ordering

src/components/contributors/Card.tsx

@@ -94,7 +94,12 @@ export const Card: ParentComponent<CardProps> = (props) => {
     cachedImage,
   } = props;
   const borderColor = color || FALLBACK_COLOR;
-  const name = getCardName(display);
+  // getCardName(display) is date-dependent; flag for detecting if on server/client
+  // and dynamically triggering shiny selectiong
+  const [mounted, setMounted] = createSignal(false);
+  const name = createMemo(() =>
+    mounted() ? getCardName(display) : display[0].name
+  );
 
   let card: HTMLDivElement = null as any;
   let placeholder: HTMLDivElement = null as any; // placeholder for the card when focused to keep its position in list
@@ -366,6 +371,7 @@ export const Card: ParentComponent<CardProps> = (props) => {
   let resizeObserver: ResizeObserver | null = null;
 
   onMount(() => {
+    setMounted(true);
     if (typeof window === "undefined" || !card) return;
 
     const setInitialStyles = () => {
@@ -509,7 +515,7 @@ export const Card: ParentComponent<CardProps> = (props) => {
                   variant="section-title"
                   color="text-background-90"
                 >
-                  {name}
+                  {name()}
                 </Typography>
                 {/* roles */}
                 <div class="flex flex-row -space-x-2.5 mt-1">
@@ -529,7 +535,7 @@ export const Card: ParentComponent<CardProps> = (props) => {
               <div class="w-54.5 h-35.25 overflow-visible rounded-2xl rounded-tr-[70px] pattern bg-size-[80%]! bg-[#1E2442]! -mt-0.5 relative">
                 <img
                   src={imgSrc()}
-                  alt={name}
+                  alt={name()}
                   class={imgClasses()}
                   loading="lazy"
                   style={{

src/routes/team.tsx

@@ -60,10 +60,11 @@ const socialsPriority = [
 
 const sortedContribs = contributors
   .slice()
-  // sort alphabetically by name
+  // sort alphabetically by the stable top-level name.
+  // NOTE: must NOT sort by getCardName(display), cuz that's date-dependent (crashes in SSR)
   .sort((a, b) => {
-    const nameA = getCardName(a.display).toLowerCase();
-    const nameB = getCardName(b.display).toLowerCase();
+    const nameA = a.name.toLowerCase();
+    const nameB = b.name.toLowerCase();
     return nameA.localeCompare(nameB);
   })
   .map((contributor) => {
@@ -277,14 +278,19 @@ export default function TeamPage() {
   const { translator } = useI18n();
 
   const [focusedCard, setFocusedCard] = createSignal<string | null>(null);
+  // only compute date-dependent state (shiny slimes) after mount, so the server
+  // render and the first client render match and hydration doesn't mismatch
+  const [mounted, setMounted] = createSignal(false);
   const [sponsors] = createResource(fetchSponsors);
 
   const activeSponsors = createMemo(() => sponsors()?.active ?? []);
   const pastSponsors = createMemo(() => sponsors()?.past ?? []);
   const envMissing = createMemo(() => sponsors()?.envMissing ?? false);
   const activeCount = createMemo(() => activeSponsors().length);
   const pastCount = createMemo(() => pastSponsors().length);
-  const shinyContribs = createMemo(() => getShinyContribs(sortedContribs));
+  const shinyContribs = createMemo(() =>
+    mounted() ? getShinyContribs(sortedContribs) : []
+  );
   const filteredContribs = createMemo(() =>
     finalContribs().filter((contrib) => {
       const search = searchTerm().toLowerCase();
@@ -324,6 +330,7 @@ export default function TeamPage() {
 
   onMount(() => {
     if (typeof window === "undefined") return;
+    setMounted(true);
     document.addEventListener("keydown", handleEscapeKey);
     document.addEventListener("mouseup", handleClickOutside);