cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

🔧 chore: show loading state on fetching repo activities

Browse Source
This commit is contained in:
Andre H 2024-03-07 14:23:34 +08:00
parent 41033c5241
commit 095008867f
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
View File

@ -4,10 +4,13 @@ import { GitCommitWithBranch } from 'types';
import { Heading } from 'components/shared/Heading'; import { Heading } from 'components/shared/Heading';
import ActivityCard from './ActivityCard'; import ActivityCard from './ActivityCard';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
import { LoadingIcon } from 'components/shared/CustomIcon';
export const Activity = ({ export const Activity = ({
isLoading,
activities, activities,
}: { }: {
isLoading: boolean;
activities: GitCommitWithBranch[]; activities: GitCommitWithBranch[];
}) => { }) => {
return ( return (
@ -19,9 +22,17 @@ export const Activity = ({
</Button> </Button>
</div> </div>
<div className="mt-5"> <div className="mt-5">
{activities.map((activity, index) => { {isLoading ? (
return <ActivityCard activity={activity} key={`activity-${index}`} />; <div className="grid place-content-center mt-10">
})} <LoadingIcon className="animate-spin" />
</div>
) : (
activities.map((activity, index) => {
return (
<ActivityCard activity={activity} key={`activity-${index}`} />
);
})
)}
</div> </div>
</div> </div>
); );

6
packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
View File

@ -32,6 +32,7 @@ const OverviewTabPanel = () => {
const { octokit } = useOctokit(); const { octokit } = useOctokit();
const navigate = useNavigate(); const navigate = useNavigate();
const [activities, setActivities] = useState<GitCommitWithBranch[]>([]); const [activities, setActivities] = useState<GitCommitWithBranch[]>([]);
const [fetchingActivities, setFetchingActivities] = useState(true);
const [liveDomain, setLiveDomain] = useState<Domain>(); const [liveDomain, setLiveDomain] = useState<Domain>();
const client = useGQLClient(); const client = useGQLClient();
@ -39,6 +40,7 @@ const OverviewTabPanel = () => {
const { project } = useOutletContext<OutletContextType>(); const { project } = useOutletContext<OutletContextType>();
useEffect(() => { useEffect(() => {
setFetchingActivities(true);
// TODO: Save repo commits in DB and avoid using GitHub API in frontend // TODO: Save repo commits in DB and avoid using GitHub API in frontend
// TODO: Figure out fetching latest commits for all branches // TODO: Figure out fetching latest commits for all branches
const fetchRepoActivity = async () => { const fetchRepoActivity = async () => {
@ -91,6 +93,8 @@ const OverviewTabPanel = () => {
// TODO: Show warning in activity section on request error // TODO: Show warning in activity section on request error
console.log(err.message); console.log(err.message);
} finally {
setFetchingActivities(false);
} }
}; };
@ -217,7 +221,7 @@ const OverviewTabPanel = () => {
</p> </p>
)} )}
</div> </div>
<Activity activities={activities} /> <Activity activities={activities} isLoading={fetchingActivities} />
</div> </div>
); );
}; };