feat: split hooks

packages/website-ue/src/hooks/useGameStrings.ts

@@ -3,11 +3,10 @@ import { useAwait } from "./useAwait";
 import { useLocale } from "./useLocale";
 
 export function useGameStrings(group: string) {
-  const { locale } = useLocale();
+  const locale = useLocale();
   const strings = useAwait(
     () => api.groupedGameStrings(locale, group, true),
     `game-strings-${locale}-${group}`
   );
-
   return strings;
 }

packages/website-ue/src/hooks/useLocale.tsx

@@ -1,7 +1,5 @@
 import locales from "@blitzkit/i18n/locales.json";
 import { createContext, useContext, type ReactNode } from "react";
-import { api } from "../core/api/dynamic";
-import { useAwait } from "./useAwait";
 
 const LocaleContext = createContext<{
   locale: string;
@@ -26,12 +24,7 @@ export function useLocale() {
     throw new Error("useLocale must be used within a LocaleProvider");
   }
 
-  const strings = useAwait(
+  return context.locale;
-    () => api.strings(context.locale),
-    `strings-${context.locale}`
-  );
-
-  return { locale: context.locale, strings };
 }
 
 export interface LocaleAcceptorProps {

packages/website-ue/src/hooks/useStrings.ts

@@ -0,0 +1,9 @@
+import { api } from "../core/api/dynamic";
+import { useAwait } from "./useAwait";
+import { useLocale } from "./useLocale";
+
+export function useStrings() {
+  const locale = useLocale();
+  const strings = useAwait(() => api.strings(locale), `strings-${locale}`);
+  return strings;
+}

packages/website-ue/src/pages/[...locale]/avatars/_index.tsx

@@ -4,7 +4,7 @@ import { IncrementalLoader } from "../../../components/IncrementalLoader";
 import { api } from "../../../core/api/dynamic";
 import { useAwait } from "../../../hooks/useAwait";
 import { useGameStrings } from "../../../hooks/useGameStrings";
-import { LocaleProvider } from "../../../hooks/useLocale";
+import { LocaleProvider, useLocale } from "../../../hooks/useLocale";
 
 interface PageProps extends ContentProps {
   locale: string;
@@ -23,6 +23,7 @@ interface ContentProps {
 }
 
 function Content({ skeleton }: ContentProps) {
+  const locale = useLocale();
   const { avatars } = useAwait(() => api.avatars(), "avatars");
   const profileAvatarEntityStrings = useGameStrings("ProfileAvatarEntity");
   const ordered = useMemo(
@@ -35,7 +36,7 @@ function Content({ skeleton }: ContentProps) {
           profileAvatarEntityStrings[b.stuff_ui!.display_name] ??
           b.stuff_ui!.display_name;
 
-        return nameA.localeCompare(nameB);
+        return nameA.localeCompare(nameB, locale);
       }),
     []
   );
@@ -43,8 +44,8 @@ function Content({ skeleton }: ContentProps) {
   return (
     <div className="avatars">
       <IncrementalLoader
-        initial={20}
+        initial={40}
-        skeleton={6}
+        skeleton={10}
         data={ordered}
         Component={AvatarCard}
       />