mirrors/Zipline-Android-App
1
0
Fork 0
mirror of https://github.com/Stef-00012/Zipline-Android-App.git synced 2025-05-11 18:35:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

[nobuild] use cuwtom skeleton component

Browse source
This commit is contained in:
Stef-00012 2025-05-05 12:37:47 +02:00
parent 35994bcfa3
commit 27f176f0e7
No known key found for this signature in database
GPG key ID: 4EA4DF16B1BF5D66
6 changed files with 68 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/(app)/folders.tsx
View file

@ -22,8 +22,7 @@ import {
getFolders,
} from "@/functions/zipline/folders";
import SkeletonTable from "@/components/skeleton/Table";
import { Skeleton } from "moti/skeleton";
import { colors } from "@/constants/skeleton";
import Skeleton from "@/components/skeleton/Skeleton";
export type FolderActions =
| "viewFiles"
@ -705,7 +704,7 @@ export default function Folders() {
marginVertical: 5,
marginHorizontal: 5
}}>
<Skeleton colors={colors} width="100%" height={200} />
<Skeleton width="100%" height={200} />
</View>
))}
</ScrollView>

17
app/(app)/metrics.tsx
View file

@ -24,8 +24,7 @@ import {
type StatsProps,
} from "@/functions/zipline/stats";
import { MaterialIcons } from "@expo/vector-icons";
import { Skeleton } from "moti/skeleton";
import { colors } from "@/constants/skeleton";
import Skeleton from "@/components/skeleton/Skeleton";
import SkeletonTable from "@/components/skeleton/Table";
export default function Metrics() {
@ -675,14 +674,14 @@ export default function Metrics() {
<Text style={styles.subHeaderText}>{stat}</Text>
<View style={styles.statContainerData}>
<Skeleton colors={colors} height={36} width={60} />
<Skeleton height={36} width={60} />
<View style={{
width: 5
}} />
<View style={{
marginTop: 9
}}>
<Skeleton colors={colors} height={27} width={40} />
<Skeleton height={27} width={40} />
</View>
</View>
</View>
@ -748,7 +747,7 @@ export default function Metrics() {
<View style={styles.chartContainer}>
<View style={styles.pieChartContainer}>
<Skeleton colors={colors} radius="round" width={250} height={250} />
<Skeleton radius="round" width={250} height={250} />
</View>
<View style={{
@ -759,7 +758,7 @@ export default function Metrics() {
<View key={index} style={{
marginHorizontal: 2.5
}}>
<Skeleton colors={colors} width={60} height={16} />
<Skeleton width={60} height={16} />
</View>
))}
</View>
@ -768,7 +767,7 @@ export default function Metrics() {
<View style={styles.chartContainer}>
<Text style={styles.chartTitle}>Count</Text>
<Skeleton colors={colors} width="100%" height={220} />
<Skeleton width="100%" height={220} />
<ChartLegend
data={[
@ -787,7 +786,7 @@ export default function Metrics() {
<View style={styles.chartContainer}>
<Text style={styles.chartTitle}>Views</Text>
<Skeleton colors={colors} width="100%" height={220} />
<Skeleton width="100%" height={220} />
<ChartLegend
data={[
@ -806,7 +805,7 @@ export default function Metrics() {
<View style={styles.chartContainer}>
<Text style={styles.chartTitle}>Storage Used</Text>
<Skeleton colors={colors} width="100%" height={220} />
<Skeleton width="100%" height={220} />
<ChartLegend
data={[

5
app/(app)/settings.tsx
View file

@ -42,6 +42,7 @@ import {
} from "@/functions/zipline/user";
import ColorPicker from "@/components/ColorPicker";
import { getVersion } from "@/functions/zipline/version";
import Skeleton from "@/components/skeleton/Skeleton";
export default function UserSettings() {
const router = useRouter();
@ -129,11 +130,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);
// setUser(typeof user === "string" ? null : user);
setToken(typeof token === "string" ? null : token.token);
setCurrentAvatar(avatar || undefined);
setExports(typeof exports === "string" ? null : exports);

5
app/(app)/urls.tsx
View file

@ -25,8 +25,7 @@ import {
getURLs,
} from "@/functions/zipline/urls";
import SkeletonTable from "@/components/skeleton/Table";
import { Skeleton } from "moti/skeleton";
import { colors } from "@/constants/skeleton";
import Skeleton from "@/components/skeleton/Skeleton";
export type URLActions =
| "copyShortLink"
@ -823,7 +822,7 @@ export default function Urls() {
marginVertical: 5,
marginHorizontal: 5
}}>
<Skeleton colors={colors} width="100%" height={200} />
<Skeleton width="100%" height={200} />
</View>
))}
</ScrollView>

7
app/index.tsx
View file

@ -12,6 +12,7 @@ import { useAuth } from "@/hooks/useAuth";
import { styles } from "@/styles/home";
import Table from "@/components/Table";
import SkeletonTable from "@/components/skeleton/Table";
import Skeleton from "@/components/skeleton/Skeleton";
import type {
APIFile,
APIRecentFiles,
@ -19,8 +20,6 @@ import type {
APIUserStats,
DashURL,
} from "@/types/zipline";
import { Skeleton } from "moti/skeleton";
import { colors } from "@/constants/skeleton";
// ------------------------ DEV -------------------------
@ -268,7 +267,7 @@ export default function Home() {
}}
>
<Text style={styles.mainHeader}>Welcome back, </Text>
<Skeleton colors={colors} width="60%" height={36} />
<Skeleton width="60%" height={36} />
</View>
<View
@ -287,7 +286,6 @@ export default function Home() {
{[1, 2, 3].map((file) => (
<View key={file} style={styles.recentFileContainer}>
<Skeleton
colors={colors}
width={200}
height={200}
radius={10}
@ -322,7 +320,6 @@ export default function Home() {
}}
>
<Skeleton
colors={colors}
width={stat[1] as number}
height={36}
/>

52
components/skeleton/Skeleton.tsx Normal file
View file

@ -0,0 +1,52 @@
import type { ReactNode } from "react";
import { colors } from "@/constants/skeleton";
import { Skeleton as NativeSkeleton } from "moti/skeleton";
interface Props {
children?: ReactNode;
disableAnimation?: boolean;
width?: Size;
height?: Size;
radius?: "round" | "square" | number;
}
function Skeleton({
children,
disableAnimation,
width,
height,
radius,
}) {
if (disableAnimation) {
if (radius === "square") radius = 0;
else if (radius === "round") radius = "50%"
return (
<View
style={{
width: width,
height: height,
borderRadius: radius|| 8,
backgroundColor: colors[1]
}}
>
{children}
</View>
)
}
return (
<NativeSkeleton
colors={colors}
width={width}
height={height}
radius={radius}
>
{children}
</NativeSkeleton>
)
}
Skeleton.Group = NativeSkeleton.Group;
export default Skeleton;