fix(web): stabilize generate loading shimmer

Avoid creating a new Motion component type inside TextShimmer render. The shared GenerateButton mounts this shimmer when TTS and clone generation begin, and recreating the animated subtree on each render could trigger React DOM removal mismatches on Android Chrome.

Use a stable motion.p component for the current shimmer usage while preserving the loading animation.

Author: gianpaj

apps/web/components/motion-primitives/text-shimmer.tsx

@@ -1,34 +1,28 @@
 'use client';
 import { motion } from 'motion/react';
-import React, { type JSX, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { cn } from '@/lib/utils';
 
-export type TextShimmerProps = {
+export interface TextShimmerProps {
   children: string;
-  as?: React.ElementType;
   className?: string;
   duration?: number;
   spread?: number;
-};
+}
 
 function TextShimmerComponent({
   children,
-  as: Component = 'p',
   className,
   duration = 2,
   spread = 2,
 }: TextShimmerProps) {
-  const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements,
-  );
-
   const dynamicSpread = useMemo(() => {
     return children.length * spread;
   }, [children, spread]);
 
   return (
-    <MotionComponent
+    <motion.p
       animate={{ backgroundPosition: '0% center' }}
       className={cn(
         'relative inline-block bg-size-[250%_100%,auto] bg-clip-text',
@@ -52,7 +46,7 @@ function TextShimmerComponent({
       }}
     >
       {children}
-    </MotionComponent>
+    </motion.p>
   );
 }