perf(website): move language translations to client side (#904)

* feat(website): move language translations to client side

* feat: add sign writing language

website/app/components/preview/Buttons.tsx

@@ -17,6 +17,7 @@ import { SizeSlider } from './SizeSlider';
 
 interface ButtonsProps {
 	subsets: string[];
+	defSubset: string;
 	hasItalic: boolean;
 }
 
@@ -73,12 +74,16 @@ const SliderButton = ({
 	);
 };
 
-const NormalButtonsGroup = ({ subsets, hasItalic }: ButtonsProps) => {
+const NormalButtonsGroup = ({
+	subsets,
+	hasItalic,
+	defSubset,
+}: ButtonsProps) => {
 	const state = useSelector(previewState);
 
 	return (
 		<>
-			<LanguageSelector subsets={subsets} />
+			<LanguageSelector subsets={subsets} defSubset={defSubset} />
 			<SizeSlider hasItalic={hasItalic} />
 			<Group grow>
 				<SliderButton

website/app/components/preview/Configure.tsx

@@ -37,6 +37,7 @@ const Configure = ({ metadata, variable, axisRegistry }: ConfigureProps) => {
 					</Text>
 					<NormalButtonsGroup
 						subsets={metadata.subsets}
+						defSubset={metadata.defSubset}
 						hasItalic={metadata.styles.includes('italic')}
 					/>
 					{variable && (

website/app/components/preview/Language.tsx

@@ -1,5 +1,4 @@
 import { useSelector } from '@legendapp/state/react';
-import { useFetcher } from '@remix-run/react';
 import { useEffect } from 'react';
 
 import { DropdownSimple } from '@/components/Dropdown';
@@ -8,33 +7,18 @@ import { subsetToLanguage } from '@/utils/language/subsets';
 import { previewState } from './observables';
 
 interface LanguageSelectorProps {
+	defSubset: string;
 	subsets: string[];
 }
 
-interface LanguageFetcher {
-	text: string;
-}
-
-const LanguageSelector = ({ subsets }: LanguageSelectorProps) => {
+const LanguageSelector = ({ defSubset, subsets }: LanguageSelectorProps) => {
 	const language = useSelector(previewState.language);
-	const languageFetcher = useFetcher<LanguageFetcher>();
-
-	useEffect(() => {
-		languageFetcher.submit(
-			{ subset: language },
-			{
-				method: 'POST',
-				action: '/actions/language',
-			},
-		);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [language]);
 
 	useEffect(() => {
-		if (languageFetcher.state === 'idle' && languageFetcher.data?.text) {
-			previewState.text.set(languageFetcher.data.text);
+		if (defSubset !== 'latin') {
+			previewState.language.set(defSubset);
 		}
-	}, [languageFetcher]);
+	}, [defSubset]);
 
 	const items = subsets.map((lang) => ({
 		label: subsetToLanguage(lang),

website/app/components/preview/observables.ts

@@ -1,5 +1,7 @@
 import { observable } from '@legendapp/state';
 
+import { getPreviewText } from '@/utils/language/language';
+
 export const previewState = observable({
 	language: 'latin',
 	size: 32,
@@ -12,6 +14,11 @@ export const previewState = observable({
 	text: 'Sphinx of black quartz, judge my vow.',
 });
 
+// If language changes, update text using getPreviewText
+previewState.language.onChange((e) => {
+	previewState.text.set(getPreviewText(e.value));
+});
+
 // Verify that the color is a valid hex code
 const COLOR_REGEX = /^#[\dA-Fa-f]{0,6}$/;
 previewState.color.onChange((e) => {

website/app/components/search/Hits.tsx

@@ -1,10 +1,10 @@
 import { useSelector } from '@legendapp/state/react';
 import { Box, Group, SimpleGrid, Skeleton, Text } from '@mantine/core';
-import { useFetcher } from '@remix-run/react';
 import { useEffect, useRef, useState } from 'react';
 import { useInfiniteHits, useInstantSearch } from 'react-instantsearch';
 
 import { useIsFontLoaded } from '@/hooks/useIsFontLoaded';
+import { getPreviewText } from '@/utils/language/language';
 import type { AlgoliaMetadata } from '@/utils/types';
 
 import classes from './Hits.module.css';
@@ -19,46 +19,32 @@ interface HitComponentProps extends Hit {
 	fontSize: number;
 }
 
-interface PreviewFetcher {
-	text: string;
-}
-
 const HitComponent = ({ hit, fontSize }: HitComponentProps) => {
 	const displaySelect = useSelector(display);
 
 	const isFontLoaded = useIsFontLoaded(hit.family);
 
 	// Change preview text if hit.defSubset is not latin or if it's an icon
 	const previewValueSelect = useSelector(previewValue);
-	const [currentPreview, setCurrentPreview] = useState(previewValueSelect);
-
-	const previewFetcher = useFetcher<PreviewFetcher>();
 	const isNotLatin =
 		hit.defSubset !== 'latin' ||
 		hit.category === 'icons' ||
 		hit.category === 'other';
-	useEffect(() => {
-		if (
-			isNotLatin &&
-			previewFetcher.state === 'idle' &&
-			!previewFetcher.data?.text
-		) {
-			previewFetcher.submit(
-				{ id: hit.objectID, subset: hit.defSubset },
-				{ method: 'POST', action: '/actions/language' },
-			);
-		}
 
-		if (previewFetcher.state === 'idle' && previewFetcher.data?.text) {
-			setCurrentPreview(previewFetcher.data.text);
-		}
-	}, [previewFetcher, isNotLatin, hit.objectID, hit.defSubset]);
+	const [currentPreview, setCurrentPreview] = useState(previewValueSelect);
 
 	// If previewValue changes, update currentPreview
 	useEffect(() => {
 		setCurrentPreview(previewValueSelect);
 	}, [previewValueSelect]);
 
+	// If isNotLatin is true, update currentPreview to the correct preview text
+	useEffect(() => {
+		if (isNotLatin) {
+			setCurrentPreview(getPreviewText(hit.defSubset, hit.objectID));
+		}
+	}, [isNotLatin, hit.defSubset, hit.objectID]);
+
 	return (
 		<Box
 			component="a"

website/app/routes/fonts.$id._index.tsx

@@ -7,7 +7,7 @@ import invariant from 'tiny-invariant';
 import { Configure } from '@/components/preview/Configure';
 import { TabsWrapper } from '@/components/preview/Tabs';
 import { TextArea } from '@/components/preview/TextArea';
-import { getPreviewText } from '@/utils/language/language.server';
+import { getPreviewText } from '@/utils/language/language';
 import { ogMeta } from '@/utils/meta';
 import {
 	getAxisRegistry,

website/app/utils/language/language.server.ts → website/app/utils/language/language.ts

@@ -526,6 +526,10 @@ export const getPreviewText = (subset: string, id?: string) => {
 			return '𑖧𑖝𑖿𑖨 𑖕𑖐𑖝𑖰 𑖫𑖯𑖡𑖿𑖝𑖰𑖡𑖿𑖧𑖯𑖧𑖭𑖿𑖪𑖯𑖝𑖡𑖿𑖝𑖿𑖨𑖿𑖧𑖯𑖜𑖯𑖽 𑖁𑖠𑖯𑖨𑖾 𑖦𑖯𑖡𑖪𑖢𑖨𑖰𑖪𑖯𑖨𑖭𑖿𑖧 𑖭𑖨𑖿𑖪𑖸𑖬𑖯𑖦𑖢𑖰';
 		}
 
+		case 'signwriting': {
+			return '𝧿𝨊𝡝𝪜𝦦𝪬𝡝𝪩𝡝𝪡𝤅';
+		}
+
 		case 'sinhala': {
 			return 'එය කාලය පිළිබඳ ප්‍රශ්නයක් පමණක් විය.';
 		}