Merge pull request #40 from the-collab-lab/18-loading

Implemented Loading component

src/App.jsx

@@ -40,7 +40,7 @@ export function App() {
 	 * This custom hook takes our token and fetches the data for our list.
 	 * Check ./api/firestore.js for its implementation.
 	 */
-	const data = useShoppingListData(listPath);
+	const { data, isLoadingListData } = useShoppingListData(listPath);
 
 	return (
 		<Router>
@@ -59,7 +59,14 @@ export function App() {
 					/>
 					<Route
 						path="/list/:path/:path"
-						element={<List data={data} lists={lists} listPath={listPath} />}
+						element={
+							<List
+								data={data}
+								lists={lists}
+								listPath={listPath}
+								isLoadingListData={isLoadingListData}
+							/>
+						}
 					/>
 					<Route
 						path="/manage-list"

src/api/firebase.js

@@ -63,9 +63,11 @@ export function useShoppingListData(listPath) {
 	/** @type {import('firebase/firestore').DocumentData[]} */
 	const initialState = [];
 	const [data, setData] = useState(initialState);
+	const [isLoadingListData, setIsLoadingListData] = useState(false);
 
 	useEffect(() => {
 		if (!listPath) return;
+		setIsLoadingListData(true);
 
 		// When we get a listPath, we use it to subscribe to real-time updates
 		// from Firestore.
@@ -84,12 +86,13 @@ export function useShoppingListData(listPath) {
 			});
 
 			// Update our React state with the new data.
+			setIsLoadingListData(false);
 			setData(nextData);
 		});
 	}, [listPath]);
 
 	// Return the data so it can be used by our React components.
-	return data;
+	return { data, isLoadingListData };
 }
 
 /**

src/components/Loading.css

@@ -0,0 +1,38 @@
+.loading-block {
+	padding: 15vh 0 4rem;
+	display: flex;
+	justify-content: center;
+}
+
+/**
+ * Spinner Loading Animation
+ * Author: Temani Afif
+ * Source: https://css-tricks.com/single-element-loaders-the-spinner/
+ * Notes:
+ *
+ * 1. Spinner size.
+ * 2. Border thickness.
+ * 3. Spinner color.
+ */
+
+.spinner {
+	width: 5rem; /* 1 */
+	padding: 0.5rem; /* 2 */
+	background: var(--color-accent); /* 3 */
+
+	aspect-ratio: 1;
+	border-radius: 50%;
+	--_m: conic-gradient(#0000, #000), linear-gradient(#000 0 0) content-box;
+	-webkit-mask: var(--_m);
+	mask: var(--_m);
+	-webkit-mask-composite: source-out;
+	mask-composite: subtract;
+	box-sizing: border-box;
+	animation: spinner__load 1s linear infinite;
+}
+
+@keyframes spinner__load {
+	to {
+		transform: rotate(1turn);
+	}
+}

src/components/Loading.jsx

@@ -0,0 +1,11 @@
+import './Loading.css';
+
+const Loading = () => {
+	return (
+		<div className="loading-block">
+			<div className="spinner"></div>
+		</div>
+	);
+};
+
+export default Loading;

src/components/index.js

@@ -2,3 +2,4 @@ export * from './ListItem';
 export * from './SingleList';
 export * from './ContainerItems';
 export * from './SearchList';
+export * from './Loading';

src/views/List.jsx

@@ -4,10 +4,11 @@ import { SearchList } from '../components';
 import { useParams, useNavigate } from 'react-router-dom';
 import { updateItem, comparePurchaseUrgency } from '../api/firebase';
 import { isMoreThanADayAgo } from '../utils';
+import Loading from '../components/Loading';
 import './List.css';
 import addFirstItem from '../pictures/addFirstItem.png';
 
-export function List({ data, lists, listPath }) {
+export function List({ data, lists, listPath, isLoadingListData }) {
 	const [newList, setNewList] = useState([]);
 	const [sortedList, setSortedList] = useState([]);
 	const { path } = useParams();
@@ -37,6 +38,10 @@ export function List({ data, lists, listPath }) {
 		updateItem(listPath, item, date);
 	};
 
+	if (isLoadingListData) {
+		return <Loading />;
+	}
+
 	return (
 		<>
 			<h2>