From 1ca3d69818afba4b2950465fd2aaef0ebb3c4669 Mon Sep 17 00:00:00 2001
From: Reed Vogt <readvogt@gmail.com>
Date: Tue, 9 Apr 2024 13:51:10 -0700
Subject: [PATCH] add

---
 src/layout/collection/SelectCollectionHeader.jsx |  2 +-
 src/pages/CollectionPage.js                      | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/layout/collection/SelectCollectionHeader.jsx b/src/layout/collection/SelectCollectionHeader.jsx
index 113bc91..f2f8f3e 100644
--- a/src/layout/collection/SelectCollectionHeader.jsx
+++ b/src/layout/collection/SelectCollectionHeader.jsx
@@ -34,7 +34,7 @@ const SelectCollectionHeader = ({ openNewDialog }) => {
       <FlexContainer>
         <SimpleSectionHeader
           sectionName="Collection Portfolio"
-          userName={user?.userBasicData?.firstName}
+          userName={user?.username}
           sectionDescription="Last updated:"
           lastUpdated={new Date().toLocaleDateString('en-US', {
             year: 'numeric',
diff --git a/src/pages/CollectionPage.js b/src/pages/CollectionPage.js
index 8c9ed81..8b2b70a 100644
--- a/src/pages/CollectionPage.js
+++ b/src/pages/CollectionPage.js
@@ -8,11 +8,19 @@ import PageLayout from '../layout/REUSABLE_COMPONENTS/PageLayout';
 import useSelectedCollection from '../context/MAIN_CONTEXT/CollectionContext/useSelectedCollection';
 import useCollectionManager from '../context/MAIN_CONTEXT/CollectionContext/useCollectionManager';
 import { useLoading } from '../context/hooks/useLoading';
+import LoadingOverlay from '../layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
 
 const CollectionPage = () => {
-  const { selectedCollection, allCollections, resetCollection } =
-    useSelectedCollection();
-  const { fetchCollections, hasFetchedCollections } = useCollectionManager();
+  const selectionData = useSelectedCollection();
+  if (!selectionData) {
+    return <LoadingOverlay />;
+  }
+  const { selectedCollection, allCollections, resetCollection } = selectionData;
+  const collectionData = useCollectionManager();
+  if (!collectionData) {
+    return <LoadingOverlay />;
+  }
+  const { fetchCollections, hasFetchedCollections } = collectionData;
 
   const { returnDisplay, isModalOpen, modalContent, closeModal } =
     useLoadingAndModal();