diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js
index dc42482..3c33305 100644
--- a/src/OurSponsors/OurSponsors.js
+++ b/src/OurSponsors/OurSponsors.js
@@ -4,6 +4,7 @@ import currentSponsorData from "../MockDB/sponsorship.yml";
 import pastSponsorData from "../MockDB/pastSponsors.yml";
 import yaml from "js-yaml";
 import OpenPage from "../Header/OpenPage";
+import fakeDelay from "../TestingTools/fakeDelay";
 
 /**
  * @param {null} null - requires onthing
@@ -30,9 +31,10 @@ const OurSponsors = () => {
 	 */
 	const getCurrentSponsors = async () => {
 		try {
+			await fakeDelay(5000);
 			const res = await fetch(currentSponsorData);
 			const rawText = await res.text();
-			const yamlDict = yaml.load(rawText);
+			const yamlDict = await yaml.load(rawText);
 			setCurrentSponsorsDict(yamlDict);
 		} catch (error) {
 			//error checking
@@ -51,116 +53,120 @@ const OurSponsors = () => {
 		try {
 			const res = await fetch(pastSponsorData);
 			const rawText = await res.text();
-			const yamlDict = yaml.load(rawText);
+			const yamlDict = await yaml.load(rawText);
 			setPastSponsorsDict(yamlDict);
 		} catch (error) {
 			// error checking
 			console.error("Error recieving data from server:");
 		}
 	};
-	// needs to change into ? : statement and have content above it
-	if (!currentSponsorsDict && !pastSponsorsDict) {
-		//awaiting for a resposne from the backend
-		//add loading notification to user
-		return <p>Loading...</p>;
-	}
-	if (currentSponsorsDict && pastSponsorsDict) {
-		//maps out the dictionary and displays the content
-		return (
-			<div id="OurSponsors">
-				<div id="BecomeASponsors">
-					<OpenPage
-						pageToGoTo={"/BecomeASponsor"}
-						textOnButton={"Become a Sponsor"}
-					/>
-				</div>
-				<div id="Sponsor">
-					<h2 className="SponsorsTitle">Current Sponsors</h2>
-					{/* gets the outmost name of the Object Name of tier*/}
-					{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
-						return (
-							<div className="Sponsors">
-								<h3>{sponsorsTier}</h3>
-								{/* gets key form list of tier */}
-								{Object.keys(currentSponsorsDict[sponsorsTier]).map(
-									(sponsorsKey) => {
-										return (
-											<div>
-												{/* gets name out of object and gets data of that sponsor preped */}
-												{Object.keys(
-													currentSponsorsDict[sponsorsTier][sponsorsKey]
-												).map((sponsorName) => {
-													let sponsorData =
-														currentSponsorsDict[sponsorsTier][sponsorsKey][
-															sponsorName
-														];
-													return (
-														<a
-															href={sponsorData.Url}
-															target="_blank"
-															rel="noreferrer">
-															<div>
-																<h4>{sponsorName}</h4>
-																<img
-																	src={sponsorData.LogoUrl}
-																	alt={sponsorName + "'s Logo"}
-																/>
-															</div>
-															{(sponsorsTier !== "Silver Tier" ||
-																sponsorsTier !== "Bronze Tier") && (
-																<div>
-																	<p>{sponsorData.DescriptionAboutSponsor}</p>
-																</div>
-															)}
-														</a>
-													);
-												})}
-											</div>
-										);
-									}
-								)}
-							</div>
-						);
-					})}
-				</div>
-				<div id="Sponsor">
-					<h2
-						className="SponsorsTitle"
-						id="SponsorEnd">
-						Past Sponsors
-					</h2>
-					{/* gets keys o objects in list */}
-					{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
-						return (
-							<div className="Sponsors">
-								{/* gets name of sponsor then uses it to get data of past sponsor */}
-								{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
-									(pastSponsorName) => {
-										let pastSponsors =
-											pastSponsorsDict[pastSponsorKey][pastSponsorName];
-										return (
-											<a
-												href={pastSponsors.Url}
-												target="_blank"
-												rel="noreferrer">
-												<div>
-													<h4>{pastSponsorName}</h4>
-													<img
-														src={pastSponsors.LogoUrl}
-														alt={pastSponsorName + "'s Logo"}
-													/>
-												</div>
-											</a>
-										);
-									}
-								)}
-							</div>
-						);
-					})}
-				</div>
+
+	return (
+		<div id="OurSponsors">
+			<div id="BecomeASponsors">
+				<OpenPage
+					pageToGoTo={"/BecomeASponsor"}
+					textOnButton={"Become a Sponsor"}
+				/>
 			</div>
-		);
-	}
+			<div id="Sponsor">
+				<h2 className="SponsorsTitle">Current Sponsors</h2>
+				{/* gets the outmost name of the Object Name of tier*/}
+				{currentSponsorsDict === undefined ? (
+					<p>Loading...</p>
+				) : (
+					<div>
+						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
+							return (
+								<div className="Sponsors">
+									<h3>{sponsorsTier}</h3>
+									{/* gets key form list of tier */}
+									{Object.keys(currentSponsorsDict[sponsorsTier]).map(
+										(sponsorsKey) => {
+											return (
+												<div>
+													{/* gets name out of object and gets data of that sponsor preped */}
+													{Object.keys(
+														currentSponsorsDict[sponsorsTier][sponsorsKey]
+													).map((sponsorName) => {
+														let sponsorData =
+															currentSponsorsDict[sponsorsTier][sponsorsKey][
+																sponsorName
+															];
+														return (
+															<a
+																href={sponsorData.Url}
+																target="_blank"
+																rel="noreferrer">
+																<div>
+																	<h4>{sponsorName}</h4>
+																	<img
+																		src={sponsorData.LogoUrl}
+																		alt={sponsorName + "'s Logo"}
+																	/>
+																</div>
+																{(sponsorsTier !== "Silver Tier" ||
+																	sponsorsTier !== "Bronze Tier") && (
+																	<div>
+																		<p>{sponsorData.DescriptionAboutSponsor}</p>
+																	</div>
+																)}
+															</a>
+														);
+													})}
+												</div>
+											);
+										}
+									)}
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
+			<div id="Sponsor">
+				<h2
+					className="SponsorsTitle"
+					id="SponsorEnd">
+					Past Sponsors
+				</h2>
+				{pastSponsorsDict === undefined ? (
+					<p>Loading...</p>
+				) : (
+					<div>
+						{/* gets keys o objects in list */}
+						{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
+							return (
+								<div className="Sponsors">
+									{/* gets name of sponsor then uses it to get data of past sponsor */}
+									{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
+										(pastSponsorName) => {
+											let pastSponsors =
+												pastSponsorsDict[pastSponsorKey][pastSponsorName];
+											return (
+												<a
+													href={pastSponsors.Url}
+													target="_blank"
+													rel="noreferrer">
+													<div>
+														<h4>{pastSponsorName}</h4>
+														<img
+															src={pastSponsors.LogoUrl}
+															alt={pastSponsorName + "'s Logo"}
+														/>
+													</div>
+												</a>
+											);
+										}
+									)}
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</div>
+	);
 };
 
 export default OurSponsors;