chore: final code review

Author: ovflowd

apps/site/components/Blog/BlogHeader/index.tsx

@@ -1,7 +1,5 @@
-'use client';
-
 import { RssIcon } from '@heroicons/react/24/solid';
-import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
 import Link from '@/components/Link';
@@ -13,11 +11,11 @@ type BlogHeaderProps = {
   category: string;
 };
 
-const BlogHeader: FC<BlogHeaderProps> = ({ category }) => {
-  const t = useTranslations();
-  const currentFile =
-    siteConfig.rssFeeds.find(item => item.category === category)?.file ??
-    'blog.xml';
+const BlogHeader: FC<BlogHeaderProps> = async ({ category }) => {
+  const t = await getTranslations();
+
+  const feed = siteConfig.rssFeeds.find(item => item.category === category);
+  const currentFile = feed ? feed.file : 'blog.xml';
 
   return (
     <header className={styles.blogHeader}>

apps/site/components/Common/AvatarGroup/Avatar/index.tsx

@@ -16,6 +16,9 @@ export type AvatarProps = {
   url?: string;
 };
 
+// @TODO: We temporarily removed the Avatar Radix UI primitive, since it was causing flashing
+// during initial load and not being able to render nicely when images are already cached.
+// @see https://github.com/radix-ui/primitives/pull/3008
 const Avatar = forwardRef<
   HTMLSpanElement,
   HTMLAttributes<HTMLSpanElement> & AvatarProps

apps/site/components/Common/ProgressionSidebar/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useTranslations } from 'next-intl';
 import type { ComponentProps, FC } from 'react';
 import { useRef } from 'react';

apps/site/components/Common/Skeleton/index.module.css

@@ -1,15 +1,15 @@
 .skeleton {
-  @apply motion-safe:dark:animate-pulse-dark
+  @apply dark:animate-pulse-dark
     pointer-events-none
+    animate-pulse
     cursor-default
     select-none
     rounded-md
     border-none
     bg-clip-border
     text-transparent
     shadow-none
-    outline-none
-    motion-safe:animate-pulse;
+    outline-none;
 }
 
 .skeleton[data-inline-skeleton] {

apps/site/components/MDX/CodeTabs/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type { ComponentProps, FC, ReactElement } from 'react';
 

apps/site/components/withDownloadCategories.tsx

@@ -1,9 +1,9 @@
 import { getLocale, getTranslations } from 'next-intl/server';
 import type { FC, PropsWithChildren } from 'react';
 
+import { getClientContext } from '@/client-context';
 import LinkTabs from '@/components/Common/LinkTabs';
 import WithNodeRelease from '@/components/withNodeRelease';
-import { useClientContext } from '@/hooks/react-server';
 import getDownloadSnippets from '@/next-data/downloadSnippets';
 import getReleaseData from '@/next-data/releaseData';
 import { defaultLocale } from '@/next.locales.mjs';
@@ -12,6 +12,7 @@ import type { NodeReleaseStatus } from '@/types';
 import { getDownloadCategory, mapCategoriesToTabs } from '@/util/downloadUtils';
 
 // By default the translated languages do not contain all the download snippets
+// Hence we always merge any translated snippet with the fallbacks for missing snippets
 const fallbackSnippets = await getDownloadSnippets(defaultLocale.code);
 
 const WithDownloadCategories: FC<PropsWithChildren> = async ({ children }) => {
@@ -20,8 +21,7 @@ const WithDownloadCategories: FC<PropsWithChildren> = async ({ children }) => {
   const releases = await getReleaseData();
   const snippets = await getDownloadSnippets(locale);
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { pathname } = useClientContext();
+  const { pathname } = getClientContext();
   const { page, category, subCategory } = getDownloadCategory(pathname);
 
   const initialRelease: NodeReleaseStatus = pathname.includes('current')

apps/site/components/withProgressionSidebar.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
 import ProgressionSidebar from '@/components/Common/ProgressionSidebar';
-import { useSiteNavigation } from '@/hooks/server';
+import { useSiteNavigation } from '@/hooks';
 import type { NavigationKeys } from '@/types';
 
 type WithProgressionSidebarProps = {

apps/site/providers/__tests__/matterProvider.test.mjs

@@ -8,6 +8,9 @@ const mockContext = {
   headings: [],
   readingTime: { text: '', minutes: 0, time: 0, words: 0 },
   filename: '',
+  // @TODO: For some reason the initial value of the provider is flipping between
+  // LOADING and OTHER, although the initial state is LOADING, render() might be doing more
+  // than just initial rendering; This requires more investigation.
   os: expect.any(String),
   architecture: '',
   bitness: 64,