fix(ui): Add CategoryTabsFallback component for async loading

This commit adds a fallback UI (`CategoryTabsFallback` component) to be displayed when `CategoryTabs` is loading asynchronously. The new fallback component is used inside a `Suspense` directive in the blog posts page.

apps/web/src/app/posts/page.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Suspense } from 'react';
 
 import { BackButton, Container } from '#/ui/global';
-import { CategoryTabs } from '#/ui/post';
+import { CategoryTabs, CategoryTabsFallback } from '#/ui/post';
 import { JsonLd } from './json-ld';
 
 export const metadata = {
@@ -25,7 +25,7 @@ const Page = () => (
       <header>
         <h1 className='font-sans font-medium'>Blog</h1>
       </header>
-      <Suspense fallback={null}>
+      <Suspense fallback={<CategoryTabsFallback />}>
         <CategoryTabs />
       </Suspense>
     </Container>

apps/web/src/ui/post/category-tabs/index.tsx

@@ -128,3 +128,25 @@ export const CategoryTabs = () => {
     </Tabs>
   );
 };
+
+export const CategoryTabsFallback = () => (
+  <Tabs className='mt-6'>
+    <div className='flex gap-4'>
+      <TabsList>
+        <TabsTrigger value='all' className='font-sans'>
+          All
+        </TabsTrigger>
+        <TabsTrigger value='tech' className='font-sans'>
+          Tech
+        </TabsTrigger>
+        <TabsTrigger value='life' className='font-sans'>
+          Life
+        </TabsTrigger>
+      </TabsList>
+      <Button variant='outline' size='icon'>
+        <RssIcon className='size-4' />
+        <span className='sr-only'>Atom</span>
+      </Button>
+    </div>
+  </Tabs>
+);