feat(web): polish catalog motion, empty states, and mobile now-playing

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/pages/HomePage.tsx

@@ -21,7 +21,7 @@ import {
   waveSunIcon,
   waveWeekendIcon,
 } from '../shared/ui/icons';
-import { cx, FormError, Icon } from '../shared/ui/ui';
+import { cx, FormError, Icon, Skeleton } from '../shared/ui/ui';
 import { WaveButton } from '../widgets/wave/WaveButton';
 import s from './home.module.css';
 import { Onboarding } from './Onboarding';
@@ -54,6 +54,13 @@ export function HomePage() {
     queryFn: async () => unwrap(await session.client.GET('/api/v1/onboarding')),
     staleTime: Infinity,
   });
+  if (onboarding.isPending) {
+    return (
+      <div className={s.home}>
+        <Skeleton round style={{ width: 320, height: 320, maxWidth: '70vw', maxHeight: '70vw' }} />
+      </div>
+    );
+  }
   if (onboarding.data?.required) {
     return (
       <Onboarding
@@ -136,6 +143,12 @@ function WaveHome() {
       {st.error === 'wave.empty' && <p className={s.note}>{t('wave.empty')}</p>}
       <FormError>{error ? errorText(error) : null}</FormError>
 
+      {options.isPending && (showActivities || showMoods) && (
+        <div className={s.picker}>
+          <Skeleton style={{ width: 280, height: 38, borderRadius: 999 }} />
+          <Skeleton style={{ width: 240, height: 38, borderRadius: 999 }} />
+        </div>
+      )}
       {options.data && (showActivities || showMoods) && (
         <div className={s.picker}>
           {showActivities && (