Align colors in loading placeholders

src/view/com/util/LoadingPlaceholder.tsx

@@ -7,10 +7,8 @@ import {
   type ViewStyle,
 } from 'react-native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {s} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
+import {atoms as a, useTheme} from '#/alf'
-import {atoms as a, useTheme as useTheme_NEW} from '#/alf'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
 import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
@@ -27,7 +25,7 @@ export function LoadingPlaceholder({
   height: DimensionValue | undefined
   style?: StyleProp<ViewStyle>
 }) {
-  const theme = useTheme()
+  const t = useTheme()
   return (
     <View
       style={[
@@ -35,7 +33,7 @@ export function LoadingPlaceholder({
         {
           width,
           height,
-          backgroundColor: theme.palette.default.backgroundLight,
+          backgroundColor: t.palette.contrast_50,
         },
         style,
       ]}
@@ -48,10 +46,9 @@ export function PostLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const t = useTheme_NEW()
+  const t = useTheme()
-  const pal = usePalette('default')
   return (
-    <View style={[styles.post, pal.view, style]}>
+    <View style={[styles.post, style]}>
       <LoadingPlaceholder
         width={42}
         height={42}
@@ -137,14 +134,11 @@ export function NotificationLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
-    <View style={[styles.notification, pal.view, style]}>
+    <View style={[styles.notification, style]}>
       <View style={[{width: 60}, a.align_end, a.pr_sm, a.pt_2xs]}>
-        <HeartIconFilled
+        <HeartIconFilled size="xl" style={{color: t.palette.contrast_50}} />
-          size="xl"
-          style={{color: pal.colors.backgroundLight}}
-        />
       </View>
       <View style={{flex: 1}}>
         <View style={[a.flex_row, s.mb10]}>
@@ -184,9 +178,8 @@ export function ProfileCardLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const pal = usePalette('default')
   return (
-    <View style={[styles.profileCard, pal.view, style]}>
+    <View style={[styles.profileCard, style]}>
       <LoadingPlaceholder
         width={40}
         height={40}
@@ -228,7 +221,7 @@ export function FeedLoadingPlaceholder({
   showTopBorder?: boolean
   showLowerPlaceholder?: boolean
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
     <View
       style={[
@@ -236,10 +229,10 @@ export function FeedLoadingPlaceholder({
           padding: 16,
           borderTopWidth: showTopBorder ? StyleSheet.hairlineWidth : 0,
         },
-        pal.border,
+        t.atoms.border_contrast_low,
         style,
       ]}>
-      <View style={[pal.view, {flexDirection: 'row'}]}>
+      <View style={[{flexDirection: 'row'}]}>
         <LoadingPlaceholder
           width={36}
           height={36}
@@ -282,7 +275,7 @@ export function ChatListItemLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const t = useTheme_NEW()
+  const t = useTheme()
   const random = useMemo(() => Math.random(), [])
   return (
     <View style={[a.flex_row, a.gap_md, a.px_lg, a.mt_lg, t.atoms.bg, style]}>