1import { PullRequestSectionHeading } from "./PullRequestSectionHeading";
2import type { PullRequestListEntry } from "@t3tools/contracts";
3import { View } from "react-native";
4import { AppText as Text } from "../../components/AppText";
5import { PullRequestCardGroup, PullRequestCardRow } from "./PullRequestControls";
6import { PullRequestStackCard } from "./PullRequestStackCard";
7import type { PullRequestParams } from "./usePullRequestDiff";
8import type { PullRequestStackState } from "./usePullRequestStack";
9import { pullRequestListReviewStatus } from "./pullRequestList";
10
11export function PullRequestOverviewLoading({
12 summary,
13 params,
14 stack,
15}: {
16 readonly summary: PullRequestListEntry;
17 readonly params: PullRequestParams;
18 readonly stack: PullRequestStackState;
19}) {
20 const review = pullRequestListReviewStatus(summary);
21 const conflicting = summary.mergeability === "conflicting";
22 const clean = summary.mergeability === "mergeable";
23 return (
24 <View
25 className="gap-5"
26 accessibilityLabel="Loading pull request details"
27 accessibilityState={{ busy: true }}
28 >
29 <PullRequestStackCard params={params} state={stack} />
30 <PullRequestCardGroup>
31 <PullRequestCardRow
32 compact
33 title={
34 summary.checksState === "passing"
35 ? "Checks completed"
36 : summary.checksState === "failing"
37 ? "Checks failing"
38 : summary.checksState === "pending"
39 ? "Checks running"
40 : "Checks"
41 }
42 icon={
43 summary.checksState === "passing"
44 ? "checkmark.circle"
45 : summary.checksState === "failing"
46 ? "exclamationmark.circle"
47 : "clock"
48 }
49 tint={
50 summary.checksState === "passing"
51 ? "accent-adaptive-emerald-600-400"
52 : summary.checksState === "failing"
53 ? "accent-danger-foreground"
54 : "accent-icon-muted"
55 }
56 >
57 <View className="h-3 w-16 rounded bg-subtle-strong" />
58 </PullRequestCardRow>
59 <PullRequestCardRow
60 compact
61 title={review?.accessibleLabel ?? "Reviews"}
62 icon={review?.icon ?? "bubble.left"}
63 tint={review?.tint}
64 >
65 <View className="h-3 w-20 rounded bg-subtle-strong" />
66 </PullRequestCardRow>
67 <PullRequestCardRow
68 compact
69 title={
70 conflicting
71 ? `Conflicts with ${summary.baseBranch}`
72 : clean
73 ? `No conflicts with ${summary.baseBranch}`
74 : "Branch"
75 }
76 icon={
77 conflicting ? "exclamationmark.triangle" : clean ? "checkmark.circle" : "arrow.branch"
78 }
79 tint={
80 conflicting
81 ? "accent-danger-foreground"
82 : clean
83 ? "accent-adaptive-emerald-600-400"
84 : undefined
85 }
86 />
87 <View className="border-t border-border-subtle p-3">
88 <View className="h-11 rounded-xl bg-subtle-strong" />
89 </View>
90 </PullRequestCardGroup>
91 {summary.labels.length ? (
92 <View className="flex-row flex-wrap gap-2">
93 {summary.labels.map((label) => (
94 <View key={label.name} className="rounded-full bg-grouped-card px-3 py-1">
95 <Text className="text-2xs text-foreground-muted">{label.name}</Text>
96 </View>
97 ))}
98 </View>
99 ) : null}
100 <View className="gap-3">
101 <PullRequestSectionHeading>Description</PullRequestSectionHeading>
102 <View className="gap-3 py-1">
103 <View className="h-4 w-full rounded bg-subtle-strong" />
104 <View className="h-4 w-full rounded bg-subtle-strong" />
105 <View className="h-4 w-3/4 rounded bg-subtle-strong" />
106 </View>
107 </View>
108 </View>
109 );
110}