subjects now loads instead of showing errors, before rendering db items

app/(tabs)/subjects.tsx

@@ -4,13 +4,14 @@ import { Subject } from '@/lib/types';
 import { Session } from '@supabase/supabase-js';
 import { router, Stack, useFocusEffect } from 'expo-router';
 import { useCallback, useEffect, useState } from 'react';
-import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
+import { ActivityIndicator, Alert, Pressable, ScrollView, Text, View } from 'react-native';
 
 import type { SubjectColor } from '@/lib/subjectColors';
 
 export default function Subjects() {
   const [subjects, SetSubjects] = useState<Subject[]>([]);
   const [session, SetSession] = useState<Session | null>(null);
+  const [isLoading, SetIsLoading] = useState(true);
 
   useEffect(() => {
     supabase.auth.getSession().then(({ data }) => {
@@ -27,7 +28,12 @@ export default function Subjects() {
   }, []);
 
   const GetSubjects = async () => {
-    if (!session?.user.id) return;
+    if (!session?.user.id) {
+      SetIsLoading(false);
+      return;
+    }
+
+    SetIsLoading(true);
 
     const { data, error } = await supabase
       .from('subjects')
@@ -37,10 +43,12 @@ export default function Subjects() {
 
     if (error) {
       Alert.alert('Subjects could not be fetched, please try again');
+      SetIsLoading(false);
       return;
     }
 
     SetSubjects((data as Subject[]) ?? []);
+    SetIsLoading(false);
   };
 
   useFocusEffect(
@@ -85,7 +93,14 @@ export default function Subjects() {
           </Text>
         </View>
 
-        {subjects.length === 0 ? (
+        {isLoading ? (
+          <View className="items-center justify-center rounded-3xl border border-app-border bg-app-surface p-5">
+            <ActivityIndicator size="large" color="#2563eb" />
+            <Text className="mt-4 text-center text-base font-semibold text-text-secondary">
+              Loading subjects...
+            </Text>
+          </View>
+        ) : subjects.length === 0 ? (
           <View className="rounded-3xl border border-app-border bg-app-surface p-5">
             <Text className="text-center text-base font-semibold text-text-secondary">
               No subjects yet
@@ -178,4 +193,4 @@ export default function Subjects() {
       </ScrollView>
     </View>
   );
-}
+}

app/subject/viewDetailsSubject.tsx

@@ -6,7 +6,7 @@ import type { Assignment } from '@/lib/types';
 import { Session } from '@supabase/supabase-js';
 import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
 import { useCallback, useEffect, useState } from 'react';
-import { Alert, Pressable, SectionList, Text, View } from 'react-native';
+import { ActivityIndicator, Alert, Pressable, SectionList, Text, View } from 'react-native';
 
 export type Subject = {
   sId: string;
@@ -23,6 +23,7 @@ export default function ViewDetailsSubject() {
   const [subject, SetSubject] = useState<Subject | null>(null);  
   const [assignments, SetAssignments] = useState<Assignment[]>([]);
   const [session, SetSession] = useState<Session | null>(null);
+  const [isLoading, SetIsLoading] = useState(true);
 
   const assignmentSections = [
     {
@@ -79,10 +80,16 @@ export default function ViewDetailsSubject() {
 
   useFocusEffect(
     useCallback(() => {
-      if (session && sId) {
-        GetSubject(sId);
-        GetAssignments(sId);
+      if (!session || !sId) {
+        return;
       }
+
+      SetIsLoading(true);
+      SetSubject(null);
+
+      Promise.all([GetSubject(sId), GetAssignments(sId)]).finally(() => {
+        SetIsLoading(false);
+      });
     }, [session, sId])
   );
 
@@ -181,6 +188,25 @@ export default function ViewDetailsSubject() {
       ? 0
       : Math.round((completedAssignments / totalAssignments) * 100);
 
+  if (isLoading) {
+    return (
+      <View className="flex-1 bg-app-bg px-5 pt-6">
+        <Stack.Screen
+          options={{
+            title: 'Subject Details',
+          }}
+        />
+
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" color="#2563eb" />
+          <Text className="mt-4 text-base font-semibold text-text-secondary">
+            Loading subject...
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
   if (!subject) {
     return (
       <View className="flex-1 bg-app-bg px-5 pt-6">
@@ -474,4 +500,4 @@ export default function ViewDetailsSubject() {
       />
     </View>
   );
-}
+}