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 = () => {
)}
-
+
);
};