From 2ac94f780e6882028a960cb8b3744dbf97be76e0 Mon Sep 17 00:00:00 2001
From: Lukas Vonlanthen <lukas.vonlanthen@gmail.com>
Date: Tue, 31 Dec 2024 11:06:33 +0100
Subject: [PATCH] Add loading state for tech list

During initial render or while translation is loading, the `translator` or `techArray` variables might still be null. In this case, display a loading spinner that will be replaced with the actual content once it is available.

Based on https://github.com/socialincome-san/public/pull/976#discussion_r1889233562
---
 .../(website)/techstack/(sections)/techlist.tsx   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/website/src/app/[lang]/[region]/(website)/techstack/(sections)/techlist.tsx b/website/src/app/[lang]/[region]/(website)/techstack/(sections)/techlist.tsx
index d7b68981a..2aba81573 100644
--- a/website/src/app/[lang]/[region]/(website)/techstack/(sections)/techlist.tsx
+++ b/website/src/app/[lang]/[region]/(website)/techstack/(sections)/techlist.tsx
@@ -5,6 +5,7 @@ import TechCard from '@/app/[lang]/[region]/(website)/techstack/(sections)/techc
 import { useTranslator } from '@/hooks/useTranslator';
 import { Tabs, TabsList, TabsTrigger } from '@socialincome/ui';
 import React from 'react';
+import { SpinnerIcon } from '@/components/logos/spinner-icon';
 
 type TechEntryJSON = {
 	title: string;
@@ -24,6 +25,16 @@ export function TechList({ lang }: DefaultParams) {
 		setIsDonated(value === 'donated');
 	};
 
+	if (!translator || !techArray) {
+		return (
+			<div className="mx-auto max-w-6xl">
+				<div className="flex justify-center pb-10">
+					<SpinnerIcon />
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div className="mx-auto max-w-6xl">
 			<div className="flex justify-center pb-10">
@@ -36,11 +47,11 @@ export function TechList({ lang }: DefaultParams) {
 			</div>
 			<div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-2">
 				{techArray
-					?.filter((t) => !isDonated || t.donated)
+					.filter((t) => !isDonated || t.donated)
 					.map((techEntry, index) => (
 						<TechCard
 							{...techEntry}
-							translations={{ badgeDonated: translator?.t('badges.donated') || '' }}
+							translations={{ badgeDonated: translator.t('badges.donated') || '' }}
 							key={index}
 						/>
 					))}