feat(mobile): apply dark mode to spinner

apps/mobile/app/(tabs)/dashboard/[section].tsx

@@ -6,6 +6,9 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
 import { useCollections } from "@linkwarden/router/collections";
+import Spinner from "@/components/ui/Spinner";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
 
 const RenderItem = React.memo(
   ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
@@ -20,6 +23,7 @@ export default function LinksScreen() {
     section?: "pinned-links" | "recent-links" | "collection";
     collectionId?: string;
   }>();
+  const { colorScheme } = useColorScheme();
 
   const navigation = useNavigation();
   const collections = useCollections(auth);
@@ -59,8 +63,16 @@ export default function LinksScreen() {
         contentInsetAdjustmentBehavior="automatic"
         ListHeaderComponent={() => <></>}
         data={links || []}
-        onRefresh={() => data.refetch()}
-        refreshing={data.isRefetching}
+        refreshControl={
+          <Spinner
+            refreshing={data.isRefetching}
+            onRefresh={() => data.refetch()}
+            progressBackgroundColor={
+              rawTheme[colorScheme as ThemeName]["base-200"]
+            }
+            colors={[rawTheme[colorScheme as ThemeName]["base-content"]]}
+          />
+        }
         initialNumToRender={4}
         keyExtractor={(item) => item.id?.toString() || ""}
         renderItem={({ item }) => (

apps/mobile/app/(tabs)/dashboard/index.tsx

@@ -1,7 +1,6 @@
 import {
   FlatList,
   Platform,
-  RefreshControl,
   ScrollView,
   StyleSheet,
   Text,
@@ -31,6 +30,7 @@ import {
   Hash,
   Link,
 } from "lucide-react-native";
+import Spinner from "@/components/ui/Spinner";
 
 export default function DashboardScreen() {
   const { auth } = useAuthStore();
@@ -240,7 +240,6 @@ export default function DashboardScreen() {
                 data={
                   links.filter((e: any) => e.pinnedBy && e.pinnedBy[0]) || []
                 }
-                // onRefresh={() => data.refetch()}
                 refreshing={dashboardData.isLoading}
                 initialNumToRender={2}
                 keyExtractor={(item) => item.id?.toString() || ""}
@@ -306,7 +305,6 @@ export default function DashboardScreen() {
                 horizontal
                 showsHorizontalScrollIndicator={false}
                 data={collectionLinks || []}
-                // onRefresh={() => data.refetch()}
                 refreshing={dashboardData.isLoading}
                 initialNumToRender={2}
                 keyExtractor={(item) => item.id?.toString() || ""}
@@ -348,12 +346,16 @@ export default function DashboardScreen() {
     >
       <ScrollView
         refreshControl={
-          <RefreshControl
+          <Spinner
             refreshing={dashboardData.isLoading || userData.isLoading}
             onRefresh={() => {
               dashboardData.refetch();
               userData.refetch();
             }}
+            progressBackgroundColor={
+              rawTheme[colorScheme as ThemeName]["base-200"]
+            }
+            colors={[rawTheme[colorScheme as ThemeName]["base-content"]]}
           />
         }
         contentContainerStyle={{

apps/mobile/app/(tabs)/links/index.tsx

@@ -5,6 +5,9 @@ import LinkListing from "@/components/LinkListing";
 import { useLocalSearchParams } from "expo-router";
 import React from "react";
 import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import Spinner from "@/components/ui/Spinner";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
 
 const RenderItem = React.memo(
   ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
@@ -13,6 +16,7 @@ const RenderItem = React.memo(
 );
 
 export default function LinksScreen() {
+  const { colorScheme } = useColorScheme();
   const { auth } = useAuthStore();
   const { search } = useLocalSearchParams<{ search?: string }>();
 
@@ -35,7 +39,16 @@ export default function LinksScreen() {
         contentInsetAdjustmentBehavior="automatic"
         ListHeaderComponent={() => <></>}
         data={links || []}
-        onRefresh={() => data.refetch()}
+        refreshControl={
+          <Spinner
+            refreshing={data.isRefetching}
+            onRefresh={() => data.refetch()}
+            progressBackgroundColor={
+              rawTheme[colorScheme as ThemeName]["base-200"]
+            }
+            colors={[rawTheme[colorScheme as ThemeName]["base-content"]]}
+          />
+        }
         refreshing={data.isRefetching}
         initialNumToRender={4}
         keyExtractor={(item) => item.id?.toString() || ""}

apps/mobile/components/ui/Spinner.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from "react";
+import { RefreshControl, RefreshControlProps } from "react-native";
+
+const Spinner = forwardRef<RefreshControl, RefreshControlProps>(
+  (props, ref) => {
+    return <RefreshControl ref={ref} {...props} />;
+  }
+);
+
+export default Spinner;