Merge branch 'main' into android-back-button

# Conflicts:
#	screens/MainScreen.tsx

Author: naltatis

App.tsx

@@ -76,7 +76,7 @@ function SwitchServerStack() {
 }
 
 function AppNavigator() {
-  const { activeServer, isLoading, servers } = useAppContext();
+  const { isLoading, servers } = useAppContext();
 
   // Show splash/loading while determining initial route
   if (isLoading) {
@@ -88,9 +88,6 @@ function AppNavigator() {
     presentation: "modal" as const,
   };
 
-  console.log("activeServer", activeServer);
-  console.log("servers", servers);
-
   const linking: LinkingOptions<RootStackParamList> = {
     prefixes: [SCHEME + "://"],
     config: {

components/Spinner.tsx

@@ -1,35 +1,86 @@
-import { Platform, View } from "react-native";
-import { size } from "@expo/ui/jetpack-compose/modifiers";
+import { useEffect } from "react";
+import Svg, { Circle } from "react-native-svg";
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
 import { useThemeColors } from "utils/theme";
 import { testingEnvironment } from "helper/launchArguments";
 
-// OS-native indeterminate spinner: Material 3 LoadingIndicator on Android,
-// SwiftUI ProgressView on iOS. Static under Detox so the idle-sync doesn't hang.
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const SIZE = 64;
+const DURATION = 1800;
+const RADIUS_EASING = Easing.bezier(0.165, 0.84, 0.44, 1);
+const OPACITY_EASING = Easing.bezier(0.3, 0.61, 0.355, 1);
+
+function PuffCircle({ delay, color }: { delay: number; color: string }) {
+  const radius = useSharedValue(1);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    radius.value = withDelay(
+      delay,
+      withRepeat(
+        withTiming(20, { duration: DURATION, easing: RADIUS_EASING }),
+        -1,
+      ),
+    );
+    opacity.value = withDelay(
+      delay,
+      withRepeat(
+        withTiming(0, { duration: DURATION, easing: OPACITY_EASING }),
+        -1,
+      ),
+    );
+  }, [radius, opacity, delay]);
+
+  const animatedProps = useAnimatedProps(() => ({
+    r: radius.value,
+    strokeOpacity: opacity.value,
+  }));
+
+  return (
+    <AnimatedCircle
+      cx={22}
+      cy={22}
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      animatedProps={animatedProps}
+    />
+  );
+}
+
+// "puff" loader by Sam Herbert (SVG-Loaders, MIT): two expanding, fading
+// rings. Static under Detox so the idle-sync doesn't hang.
 export default function Spinner() {
   const colors = useThemeColors();
 
   if (testingEnvironment()) {
-    return <View style={{ width: 48, height: 48 }} />;
-  }
-
-  if (Platform.OS === "android") {
-    const { Host, LoadingIndicator } =
-      require("@expo/ui/jetpack-compose") as typeof import("@expo/ui/jetpack-compose");
     return (
-      <Host matchContents>
-        <LoadingIndicator
-          color={colors.primary}
-          modifiers={[size(48, 48)]}
+      <Svg width={SIZE} height={SIZE} viewBox="0 0 44 44">
+        <Circle
+          cx={22}
+          cy={22}
+          r={10}
+          fill="none"
+          stroke={colors.primary}
+          strokeWidth={2}
+          strokeOpacity={0.5}
         />
-      </Host>
+      </Svg>
     );
   }
 
-  const { Host, ProgressView } =
-    require("@expo/ui/swift-ui") as typeof import("@expo/ui/swift-ui");
   return (
-    <Host matchContents>
-      <ProgressView />
-    </Host>
+    <Svg width={SIZE} height={SIZE} viewBox="0 0 44 44">
+      <PuffCircle delay={0} color={colors.primary} />
+      <PuffCircle delay={DURATION / 2} color={colors.primary} />
+    </Svg>
   );
 }

screens/AddServerScreen.tsx

@@ -50,7 +50,6 @@ function AddServerScreen({
 
   const serverSelected = useCallback(
     async (server: Server) => {
-      console.log("serverSelected");
       setInternalServer(server);
 
       // a freshly added server becomes the active one

screens/MainScreen.tsx

@@ -20,7 +20,6 @@ import {
   ShouldStartLoadRequest,
   WebViewErrorEvent,
   WebViewHttpErrorEvent,
-  WebViewTerminatedEvent,
   WebViewNavigation,
 } from "react-native-webview/lib/WebViewTypes";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
@@ -93,7 +92,6 @@ export default function MainScreen({
 
     if (!isConnected) {
       intervalId = setInterval(() => {
-        console.log("Attempting to reconnect...");
         setWebViewKey((prevKey) => prevKey + 1);
       }, 5000);
     }
@@ -213,17 +211,17 @@ export default function MainScreen({
   );
 
   const onError = useCallback((event: WebViewErrorEvent) => {
-    console.log("onError", event);
+    console.log("onError", event.nativeEvent.description);
     setIsConnected(false);
   }, []);
 
   const onHttpError = useCallback((event: WebViewHttpErrorEvent) => {
-    console.log("onHttpError", event);
+    console.log("onHttpError", event.nativeEvent.statusCode);
     setIsConnected(false);
   }, []);
 
-  const onTerminate = useCallback((event: WebViewTerminatedEvent) => {
-    console.log("onTerminate", event);
+  const onTerminate = useCallback(() => {
+    console.log("onTerminate");
     setIsConnected(false);
   }, []);
 
@@ -287,13 +285,12 @@ export default function MainScreen({
               flex: 1,
               justifyContent: "center",
               alignItems: "center",
+              gap: 24,
               backgroundColor: colors.background,
             }}
           >
+            <AppText color="hint">{t("servers.search.searching")}</AppText>
             <Spinner />
-            <AppText color="hint" style={{ marginTop: 24 }}>
-              {t("servers.search.searching")}
-            </AppText>
           </View>
           <View
             style={{
@@ -332,8 +329,6 @@ export default function MainScreen({
     return <View style={{ flex: 1, backgroundColor: colors.background }} />;
   }
 
-  console.log("serverUrl", activeServer.url, isConnected);
-
   return (
     <>
       {LayoutMemoized}

utils/server.ts

@@ -32,7 +32,7 @@ export async function verifyEvccServer(server: Server) {
   try {
     response = await axios.get(server.url, options);
   } catch (error) {
-    console.log(error);
+    console.log(String(error));
     if (axios.isAxiosError(error) && error.response?.status === 401) {
       throw new Error(t("servers.manually.missingOrWrongAuthentication"));
     }