diff --git a/.github/workflows/end-to-end-test.yml b/.github/workflows/end-to-end-test.yml
index 8d3f8dad..af107043 100644
--- a/.github/workflows/end-to-end-test.yml
+++ b/.github/workflows/end-to-end-test.yml
@@ -116,6 +116,11 @@ jobs:
cd $GITHUB_WORKSPACE
make playwright-browsers
+
+ - name: Trigger catalog
+ run: |
+ while true; do x=0; curl -f http://$REGISTRY_HOST:$REGISTRY_PORT/v2/_catalog || x=1; if [ $x -eq 0 ]; then break; fi; sleep 1; done
+
- name: Run integration tests
run: |
cd $GITHUB_WORKSPACE
diff --git a/src/assets/noData.svg b/src/assets/noData.svg
new file mode 100644
index 00000000..78f82626
--- /dev/null
+++ b/src/assets/noData.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 44c38cf7..82407294 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -10,6 +10,7 @@ import { useNavigate, createSearchParams } from 'react-router-dom';
import { sortByCriteria } from 'utilities/sortCriteria';
import { HOME_POPULAR_PAGE_SIZE, HOME_RECENT_PAGE_SIZE, HOME_BOOKMARKS_PAGE_SIZE } from 'utilities/paginationConstants';
import { isEmpty } from 'lodash';
+import NoDataComponent from 'components/Shared/NoDataComponent';
const useStyles = makeStyles((theme) => ({
gridWrapper: {
@@ -199,7 +200,11 @@ function Home() {
navigate({ pathname: `/explore`, search: createSearchParams({ [type]: value }).toString() });
};
- const renderCards = (cardArray) => {
+ const renderCards = (cardArray, isLoading) => {
+ if (cardArray && cardArray.length < 1 && !isLoading) {
+ return ;
+ }
+
return (
cardArray &&
cardArray.map((item, index) => {
@@ -244,7 +249,7 @@ function Home() {
- {isLoadingPopular ? : renderCards(popularData)}
+ {isLoadingPopular ? : renderCards(popularData, isLoadingPopular)}
{/* currently most popular will be by downloads until stars are implemented */}
@@ -262,7 +267,7 @@ function Home() {
- {isLoadingRecent ? : renderCards(recentData)}
+ {isLoadingRecent ? : renderCards(recentData, isLoadingRecent)}
{!isEmpty(bookmarkData) && (
<>
@@ -281,7 +286,7 @@ function Home() {
- {isLoadingBookmarks ? : renderCards(bookmarkData)}
+ {isLoadingBookmarks ? : renderCards(bookmarkData, isLoadingBookmarks)}
)}
diff --git a/src/components/Shared/NoDataComponent.jsx b/src/components/Shared/NoDataComponent.jsx
new file mode 100644
index 00000000..d6290816
--- /dev/null
+++ b/src/components/Shared/NoDataComponent.jsx
@@ -0,0 +1,40 @@
+// react global
+import React from 'react';
+
+// components
+import { Stack, Typography } from '@mui/material';
+
+//styling
+import makeStyles from '@mui/styles/makeStyles';
+
+import nodataImage from '../../assets/noData.svg';
+
+const useStyles = makeStyles((theme) => ({
+ noDataContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
+ noDataImage: {
+ maxWidth: '233px',
+ maxHeight: '240px'
+ },
+ noDataText: {
+ fontSize: '1.5rem',
+ fontWeight: '600',
+ color: theme.palette.secondary.main
+ }
+}));
+
+function NoDataComponent({ text }) {
+ const classes = useStyles();
+
+ return (
+
+ 
+ {text ? text : 'No Data'}
+
+ );
+}
+
+export default NoDataComponent;