diff --git a/app/(app)/(files)/files.tsx b/app/(app)/(files)/files.tsx index 78c8d2c..8f0507f 100644 --- a/app/(app)/(files)/files.tsx +++ b/app/(app)/(files)/files.tsx @@ -46,6 +46,9 @@ import { View, } from "react-native"; import ColorPicker from "@/components/ColorPicker"; +import SkeletonTable from "@/components/skeleton/Table"; +import { Skeleton } from "moti/skeleton"; +import { colors } from "@/constants/skeleton"; export default function Files() { const router = useRouter(); @@ -1177,30 +1180,58 @@ export default function Files() { })} /> ) : ( - <> - - {files.page.map((file) => ( - - setFocusedFile(file)} - /> - - ))} - - + + {files.page.map((file) => ( + + setFocusedFile(file)} + /> + + ))} + )} ) : ( - - Loading... - + <> + {compactModeEnabled ? ( + { + return [80, 40, 60, 60, 90, 20, 120, 150]; + })} + rowHeight={55} + disableAnimations + /> + ) : ( + + {[...Array(4).keys()].map(index => ( + + + + ))} + + )} + )} diff --git a/app/(app)/folders.tsx b/app/(app)/folders.tsx index c6ce89b..1ac30f7 100644 --- a/app/(app)/folders.tsx +++ b/app/(app)/folders.tsx @@ -21,6 +21,9 @@ import { editFolder, getFolders, } from "@/functions/zipline/folders"; +import SkeletonTable from "@/components/skeleton/Table"; +import { Skeleton } from "moti/skeleton"; +import { colors } from "@/constants/skeleton"; export type FolderActions = | "viewFiles" @@ -675,9 +678,39 @@ export default function Folders() { )} ) : ( - - Loading... - + <> + {compactModeEnabled ? ( + { + return [80, 30, 30, 90, 90, 40, 120, 200]; + })} + rowHeight={55} + disableAnimations + /> + ) : ( + + {[...Array(4).keys()].map(index => ( + + + + ))} + + )} + )} diff --git a/app/(app)/metrics.tsx b/app/(app)/metrics.tsx index 10692ad..ed31ab2 100644 --- a/app/(app)/metrics.tsx +++ b/app/(app)/metrics.tsx @@ -24,6 +24,9 @@ import { type StatsProps, } from "@/functions/zipline/stats"; import { MaterialIcons } from "@expo/vector-icons"; +import { Skeleton } from "moti/skeleton"; +import { colors } from "@/constants/skeleton"; +import SkeletonTable from "@/components/skeleton/Table"; export default function Metrics() { useAuth(); @@ -222,7 +225,7 @@ export default function Metrics() { difference: statsDifferences.files, }, { - title: "URLs", + title: "URLs:", amount: mainStat.data.urls, difference: statsDifferences.urls, }, @@ -656,8 +659,166 @@ export default function Metrics() { ) : ( - - Loading... + + + + + {[ + "Files:", + "URLs:", + "Storage Used:", + "Users:", + "File Views:", + "URL Views:", + ].map((stat) => ( + + {stat} + + + + + + + + + + ))} + + + {userSpecificMetrics && ( + <> + + + + + + + + + + { + return ["55%", 30]; + })} + /> + + + )} + + + + + + + + {[...Array(5).keys()].map((index) => ( + + + + ))} + + + + + Count + + + + + + + + Views + + + + + + + + Storage Used + + + + + + + )} diff --git a/app/(app)/urls.tsx b/app/(app)/urls.tsx index 525fdce..fbb4970 100644 --- a/app/(app)/urls.tsx +++ b/app/(app)/urls.tsx @@ -24,6 +24,9 @@ import { editURL, getURLs, } from "@/functions/zipline/urls"; +import SkeletonTable from "@/components/skeleton/Table"; +import { Skeleton } from "moti/skeleton"; +import { colors } from "@/constants/skeleton"; export type URLActions = | "copyShortLink" @@ -140,8 +143,8 @@ export default function Urls() { switch (type) { case "copyShortLink": { const urlDest = url.vanity - ? `${dashUrl}${settings?.urlsRoute === "/" ? "" : settings?.urlsRoute}/${url.vanity}` - : `${dashUrl}${settings?.urlsRoute === "/" ? "" : settings?.urlsRoute}/${url.code}`; + ? `${dashUrl}${settings?.urlsRoute === "/" ? "" : settings?.urlsRoute || "/go"}/${url.vanity}` + : `${dashUrl}${settings?.urlsRoute === "/" ? "" : settings?.urlsRoute || "/go"}/${url.code}`; const saved = await Clipboard.setStringAsync(urlDest); @@ -455,13 +458,13 @@ export default function Urls() { }} icon="add-link" color="transparent" - iconColor={urls && settings && dashUrl ? "#2d3f70" : "#2d3f7055"} + iconColor={urls && dashUrl ? "#2d3f70" : "#2d3f7055"} borderColor="#222c47" borderWidth={2} iconSize={30} padding={4} rippleColor="#283557" - disabled={!urls || !dashUrl || !settings} + disabled={!urls || !dashUrl} margin={{ left: 2, right: 2, @@ -479,13 +482,13 @@ export default function Urls() { }} icon={compactModeEnabled ? "view-module" : "view-agenda"} color="transparent" - iconColor={urls && settings && dashUrl ? "#2d3f70" : "#2d3f7055"} + iconColor={urls && dashUrl ? "#2d3f70" : "#2d3f7055"} borderColor="#222c47" borderWidth={2} iconSize={30} padding={4} rippleColor="#283557" - disabled={!urls || !dashUrl || !settings} + disabled={!urls || !dashUrl} margin={{ left: 2, right: 2, @@ -532,7 +535,7 @@ export default function Urls() { - {urls && settings && dashUrl ? ( + {urls && dashUrl ? ( <> {compactModeEnabled ? ( @@ -792,9 +795,40 @@ export default function Urls() { )} ) : ( - - Loading... - + <> + {compactModeEnabled ? ( + { + return [60, 50, 200, 30, 30, 70, 40, 180, 90]; + })} + rowHeight={55} + disableAnimations + /> + ) : ( + + {[...Array(4).keys()].map(index => ( + + + + ))} + + )} + )} diff --git a/app/_layout.tsx b/app/_layout.tsx index 68ac479..907a957 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -53,11 +53,13 @@ export default function Layout() { ) : ( - - - No internet connection. - - +
+ + + No internet connection. + + +
)} diff --git a/app/index.tsx b/app/index.tsx index da47d8c..25d5db7 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -257,24 +257,31 @@ export default function Home() { ) : ( - - - + + + Welcome back, + - - + + + You have ## files uploaded. + - - - + Recent Files {[1, 2, 3].map((file) => ( @@ -289,11 +296,7 @@ export default function Home() { ))} - - - + Stats - { - [1, 2, 3, 4, 5, 6, 7, 8].map(stat => ( - - + {[ + ["Files Uploaded:", 60], + ["Favorite Files:", 50], + ["Storage Used:", 90], + ["Average Storage Used:", 70], + ["File Views:", 50], + ["File Average Views:", 50], + ["Links Created:", 60], + ["Total Link View:", 50], + ].map((stat) => ( + + {stat[0]} + + - )) - } + + ))} - - - - - + + File Types + { - return ["55%", 30] + rows={[...Array(4).keys()].map(() => { + return ["55%", 30]; })} /> diff --git a/components/Header.tsx b/components/Header.tsx index c1a3345..5db2e65 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -11,6 +11,8 @@ import Sidebar from "@/components/Sidebar"; import type React from "react"; import { useShareIntent } from "@/hooks/useShareIntent"; import { getRippleColor } from "@/functions/util"; +import { Skeleton } from "moti/skeleton"; +import { colors } from "@/constants/skeleton"; export default function Header({ children }: PropsWithChildren) { const router = useRouter(); @@ -25,13 +27,7 @@ export default function Header({ children }: PropsWithChildren) { useEffect(() => { if (!avatar || !user) { - (async () => { - const avatar = await getCurrentUserAvatar(); - const user = await getCurrentUser(); - - setAvatar(avatar); - setUser(typeof user === "string" ? null : user); - })(); + fetchUser() } }, [avatar, user]); @@ -103,7 +99,43 @@ export default function Header({ children }: PropsWithChildren) { ) : ( - + + + + + ( + + )} + android_ripple={{ + color: getRippleColor("#0c101c") + }} + onPress={() => { + setSidebarOpen((prev) => !prev); + }} + /> + + + + + + + + + + + + )} ; - rows: Array>; - rowWidth: Array; + headerRow: Array; + rows: Array>; + rowWidth: Array; + rowHeight?: DimensionValue; + disableAnimations?: boolean; } export default function SkeletonTable({ - headerRow, - rows, - rowWidth + headerRow, + rows, + rowWidth, + rowHeight, + disableAnimations, }: Props) { - const updatedHeaderRow = headerRow.map((row) => { - return ["string", "number", "boolean"].includes(typeof row.row) ? ( - - {row.row} - - ) : ( - row.row - ) - }) - - return ( - + const updatedHeaderRow = headerRow.map((row, index) => ( + + key={index} + style={{ + ...styles.rowText, + ...styles.headerRow, + }} + > + {row} + + )); + + return ( + {rows.map((row, index) => { - let rowStyle = styles.row; + let rowStyle = { + ...styles.row, + ...(rowHeight && { height: rowHeight }), + }; if (index === 0) rowStyle = { ...styles.row, ...styles.firstRow, + ...(rowHeight && { height: rowHeight }), }; if (index === rows.length - 1) rowStyle = { ...styles.row, ...styles.lastRow, + ...(rowHeight && { height: rowHeight }), }; - - const rowData = row.map(data => { - return ( - - ) - }) + + const rowData = row.map((data, index) => { + return ( + <> + {disableAnimations ? ( + + key={index} + style={{ + backgroundColor: colors[1], + height: 14, + width: data, + borderRadius: 8 + }} + /> + ) : ( + + + key={index} + colors={colors} + height={14} + width={data} + /> + )} + + ); + }); return ( - ) -} \ No newline at end of file + ); +}