Adding custom spinner component (#614)

## Description

Fixes re-renders of the loading spinner in the computer vision and LLM
demo apps by using a custom spinner component that prevents flickering.

### Introduces a breaking change?

- [ ] Yes
- [x] No

### Type of change

- [x] Bug fix (change which fixes an issue)
- [ ] New feature (change which adds functionality)
- [ ] Documentation update (improves or adds clarity to existing
documentation)
- [ ] Other (chores, tests, code style improvements etc.)

### Tested on

- [ ] iOS
- [x] Android

### Testing instructions

Run demo app with uncached model.

### Screenshots

<!-- Add screenshots here, if applicable -->

### Related issues

Closes #589

### Checklist

- [x] I have performed a self-review of my code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [x] My changes generate no new warnings

### Additional notes

<!-- Include any additional information, assumptions, or context that
reviewers might need to understand this PR. -->

Author: a-szymanska

apps/computer-vision/app/classification/index.tsx

@@ -1,4 +1,4 @@
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import { getImage } from '../../utils';
 import { useClassification, EFFICIENTNET_V2_S } from 'react-native-executorch';
 import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';

apps/computer-vision/app/image_segmentation/index.tsx

@@ -1,4 +1,4 @@
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
 import {

apps/computer-vision/app/object_detection/index.tsx

@@ -1,4 +1,4 @@
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
 import {

apps/computer-vision/app/ocr/index.tsx

@@ -1,4 +1,4 @@
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
 import { useOCR, OCR_ENGLISH } from 'react-native-executorch';

apps/computer-vision/app/ocr_vertical/index.tsx

@@ -1,4 +1,4 @@
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
 import { useVerticalOCR, VERTICAL_OCR_ENGLISH } from 'react-native-executorch';

apps/computer-vision/app/style_transfer/index.tsx

@@ -1,4 +1,4 @@
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
 import {

apps/computer-vision/app/text_to_image/index.tsx

@@ -7,7 +7,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import { useTextToImage, BK_SDM_TINY_VPRED_256 } from 'react-native-executorch';
 import { GeneratingContext } from '../../context';
 import ColorPalette from '../../colors';

apps/computer-vision/components/Spinner.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, Modal } from 'react-native';
+import ColorPalette from '../colors';
+
+interface SpinnerProps {
+  visible: boolean;
+  textContent: string;
+}
+
+const Spinner = ({ visible, textContent }: SpinnerProps) => {
+  return (
+    <Modal transparent={true} animationType="fade" visible={visible}>
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <ActivityIndicator size="large" color="#FFFFFF" />
+          <Text style={styles.text}>{textContent}</Text>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  container: {
+    padding: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    marginTop: 15,
+    color: ColorPalette.primary,
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default Spinner;

apps/llm/app/llm/index.tsx

@@ -11,13 +11,13 @@ import {
   View,
 } from 'react-native';
 import SendIcon from '../../assets/icons/send_icon.svg';
-import Spinner from 'react-native-loading-spinner-overlay';
 import { useLLM, LLAMA3_2_1B_SPINQUANT } from 'react-native-executorch';
 import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
 import { useIsFocused } from '@react-navigation/native';
 import { GeneratingContext } from '../../context';
+import Spinner from '../../components/Spinner';
 
 export default function LLMScreenWrapper() {
   const isFocused = useIsFocused();

apps/llm/app/llm_structured_output/index.tsx

@@ -11,7 +11,7 @@ import {
   View,
 } from 'react-native';
 import SendIcon from '../../assets/icons/send_icon.svg';
-import Spinner from 'react-native-loading-spinner-overlay';
+import Spinner from '../../components/Spinner';
 import {
   useLLM,
   fixAndValidateStructuredOutput,
@@ -224,6 +224,7 @@ const styles = StyleSheet.create({
     color: ColorPalette.primary,
   },
   bottomHelloText: {
+    padding: 20,
     fontFamily: 'regular',
     fontSize: 20,
     lineHeight: 28,