Sort Plugins by Name & Center Plugin's Spinner

src/hooks/persisted/usePlugins.ts

@@ -1,5 +1,6 @@
 import { locale } from 'expo-localization';
 import { Language, languagesMapping } from '@utils/constants/languages';
+import { orderBy } from 'lodash-es';
 import { useMMKVObject } from 'react-native-mmkv';
 import { PluginItem } from '@plugins/types';
 import {
@@ -50,7 +51,7 @@ export default function usePlugins() {
     );
     setFilteredAvailablePlugins(
       filter.reduce((pre, cur) => {
-        pre[cur] = availablePlugins[cur];
+        pre[cur] = orderBy(availablePlugins[cur], 'name');
         return pre;
       }, {} as PluginsMap),
     );

src/screens/browse/components/PluginCard.tsx

@@ -120,7 +120,11 @@ const PluginCard: React.FC<Props> = ({
               theme={theme}
             />
           ) : (
-            <ActivityIndicator color={theme.primary} size={22} />
+            <ActivityIndicator
+              color={theme.primary}
+              size={22}
+              style={styles.spinner}
+            />
           )}
         </View>
       </Pressable>
@@ -135,7 +139,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    padding: 16,
+    paddingHorizontal: 16,
     paddingVertical: 12,
   },
   icon: {
@@ -148,7 +152,6 @@ const styles = StyleSheet.create({
     marginLeft: 16,
   },
   addition: {
-    textAlign: 'left',
     fontSize: 12,
   },
   name: {
@@ -157,12 +160,12 @@ const styles = StyleSheet.create({
   flexRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    flex: 7,
   },
   buttonGroup: {
-    flex: 3,
     flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
+  },
+  spinner: {
+    marginRight: 12,
+    marginLeft: 4,
   },
 });