[nobuild] start building skeleton UI - unfinished

app/(app)/login.tsx

@@ -167,7 +167,7 @@ export default function Login() {
 						db.set("token", token);
 
 						const versionData = await getVersion();
-							
+							console.log(versionData, token)
 						if (
 							typeof versionData === "string" ||
 							semver.lt(versionData.version, "4.0.0")

app/(app)/settings.tsx

@@ -129,7 +129,9 @@ export default function UserSettings() {
 			const avatar = await getCurrentUserAvatar();
 			const exports = await getUserExports();
 			const zeroByteFiles = await getZeroByteFiles();
+			console.log("a")
 			const versionData = await getVersion();
+			console.log(versionData)
 
 			setUser(typeof user === "string" ? null : user);
 			setToken(typeof token === "string" ? null : token.token);
@@ -141,6 +143,7 @@ export default function UserSettings() {
 			setZiplineVersion(
 				typeof versionData === "string" ? null : versionData.version,
 			);
+
 		})();
 	}, []);
 

app/index.tsx

@@ -18,6 +18,8 @@ import type {
 	APIUserStats,
 	DashURL,
 } from "@/types/zipline";
+import { Skeleton } from "moti/skeleton";
+import { colors } from "@/constants/skeleton";
 
 // ------------------------ DEV -------------------------
 
@@ -252,8 +254,65 @@ export default function Home() {
 					)}
 				</ScrollView>
 			) : (
-				<View style={styles.loadingContainer}>
-					<Text style={styles.loadingText}>Loading...</Text>
+				<View style={styles.mainContainer}>
+					<Skeleton.Group show={!user}>
+						<ScrollView style={{
+							marginTop: 5
+						}}>
+							<View>
+								<Skeleton colors={colors} width="70%" height={28} />
+							</View>
+
+							<View style={{
+								marginTop: 5
+							}}>
+								<Skeleton colors={colors} width="50%" height={16} />
+							</View>
+
+							<View style={{
+								marginTop: 7
+							}}>
+								<Skeleton colors={colors} width="30%" height={28} />
+							</View>
+
+							<ScrollView horizontal style={styles.scrollView}>
+								{[1, 2, 3].map((file) => (
+									<View key={file} style={styles.recentFileContainer}>
+										<Skeleton
+											colors={colors}
+											width={200}
+											height={200}
+											radius={10}
+										/>
+									</View>
+								))}
+							</ScrollView>
+
+							<View style={{
+								marginTop: 7
+							}}>
+								<Skeleton colors={colors} width="20%" height={28} />
+							</View>
+
+							<ScrollView
+								horizontal
+								style={{
+									...styles.scrollView,
+								}}
+							>
+								{
+									[1, 2, 3, 4, 5, 6, 7, 8].map(stat => (
+										<View key={stat} style={{
+											marginHorizontal: 4,
+											marginVertical: 7.5
+										}}>
+											<Skeleton colors={colors} width={170} height={100} />
+										</View>
+									))
+								}
+							</ScrollView>
+						</ScrollView>
+					</Skeleton.Group>
 				</View>
 			)}
 		</View>

constants/skeleton.ts

@@ -0,0 +1,5 @@
+export const colors = [
+    '#161c2d', // slightly lighter than background
+    '#2a3452', // more saturated/brighter mid-tone for gradient
+    '#161c2d', // back to first color for smooth looping
+]

functions/zipline/version.ts

@@ -27,7 +27,28 @@ export async function getVersion(): Promise<APIVersion | string> {
 			  }
 			| undefined;
 
-		if (data) return data.error;
+		if (data && data.statusCode !== 403) return data.error;
+
+		// start: temp fix for non-admins
+		try {
+			const res = await axios.head(`${url}/api/server/settings`, {
+				headers: {
+					Authorization: token,
+				},
+			});
+
+			if (res.status !== 404) return {
+				version: "4.0.0"
+			}
+		} catch (e) {
+			const error = e as AxiosError;
+
+			if (error.status !== 404) return {
+				version: "4.0.0"
+			}
+		}
+
+		// end: temp fix for non-admins
 
 		return "Something went wrong...";
 	}

package.json

@@ -10,7 +10,8 @@
     "run:android": "expo run:android",
     "test": "jest --watchAll",
     "lint": "expo lint",
-    "android": "expo run:android"
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   },
   "jest": {
     "preset": "jest-expo"
@@ -38,6 +39,7 @@
     "expo-splash-screen": "^0.29.21",
     "expo-status-bar": "^2.0.1",
     "expo-system-ui": "^4.0.8",
+    "moti": "^0.30.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "^0.77.0",