diff --git a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx index 252d85a1..38b4d959 100644 --- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx +++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx @@ -4,10 +4,13 @@ import { GitCommitWithBranch } from 'types'; import { Heading } from 'components/shared/Heading'; import ActivityCard from './ActivityCard'; import { Button } from 'components/shared/Button'; +import { LoadingIcon } from 'components/shared/CustomIcon'; export const Activity = ({ + isLoading, activities, }: { + isLoading: boolean; activities: GitCommitWithBranch[]; }) => { return ( @@ -19,9 +22,17 @@ export const Activity = ({
- {activities.map((activity, index) => { - return ; - })} + {isLoading ? ( +
+ +
+ ) : ( + activities.map((activity, index) => { + return ( + + ); + }) + )}
); diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx index c1337045..40975555 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx @@ -32,6 +32,7 @@ const OverviewTabPanel = () => { const { octokit } = useOctokit(); const navigate = useNavigate(); const [activities, setActivities] = useState([]); + const [fetchingActivities, setFetchingActivities] = useState(true); const [liveDomain, setLiveDomain] = useState(); const client = useGQLClient(); @@ -39,6 +40,7 @@ const OverviewTabPanel = () => { const { project } = useOutletContext(); useEffect(() => { + setFetchingActivities(true); // TODO: Save repo commits in DB and avoid using GitHub API in frontend // TODO: Figure out fetching latest commits for all branches const fetchRepoActivity = async () => { @@ -91,6 +93,8 @@ const OverviewTabPanel = () => { // TODO: Show warning in activity section on request error console.log(err.message); + } finally { + setFetchingActivities(false); } }; @@ -217,7 +221,7 @@ const OverviewTabPanel = () => {

)} - + ); };