diff --git a/frontend/src/components/Wrapped/Specifics/Bar.js b/frontend/src/components/Wrapped/Specifics/Bar.js
index 1f31ca4b..0f25ac7e 100644
--- a/frontend/src/components/Wrapped/Specifics/Bar.js
+++ b/frontend/src/components/Wrapped/Specifics/Bar.js
@@ -29,7 +29,7 @@ const dayNames = [
   'Saturday',
 ];
 
-const BarMonth = ({ data }) => {
+const BarMonth = ({ data, downloadLoading }) => {
   const newData = data?.month_data?.months || [];
 
   // eslint-disable-next-line no-unused-vars
@@ -45,15 +45,17 @@ const BarMonth = ({ data }) => {
               {displayContribs ? 'By Contribution Count' : 'By LOC Changed'}
             </p>
           </div>
-          <div className="flex-shrink-0">
-            <button
-              type="button"
-              className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
-              onClick={() => setDisplayContribs(!displayContribs)}
-            >
-              <span>Toggle</span>
-            </button>
-          </div>
+          {!downloadLoading && (
+            <div className="flex-shrink-0">
+              <button
+                type="button"
+                className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
+                onClick={() => setDisplayContribs(!displayContribs)}
+              >
+                <span>Toggle</span>
+              </button>
+            </div>
+          )}
         </div>
         {displayContribs ? (
           <BarGraph
@@ -81,9 +83,10 @@ const BarMonth = ({ data }) => {
 
 BarMonth.propTypes = {
   data: PropTypes.object.isRequired,
+  downloadLoading: PropTypes.bool.isRequired,
 };
 
-const BarDay = ({ data }) => {
+const BarDay = ({ data, downloadLoading }) => {
   const newData = data?.day_data?.days || [];
 
   const [displayContribs, setDisplayContribs] = useState(true);
@@ -98,15 +101,17 @@ const BarDay = ({ data }) => {
               {displayContribs ? 'By Contribution Count' : 'By LOC Changed'}
             </p>
           </div>
-          <div className="flex-shrink-0">
-            <button
-              type="button"
-              className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
-              onClick={() => setDisplayContribs(!displayContribs)}
-            >
-              <span>Toggle</span>
-            </button>
-          </div>
+          {!downloadLoading && (
+            <div className="flex-shrink-0">
+              <button
+                type="button"
+                className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
+                onClick={() => setDisplayContribs(!displayContribs)}
+              >
+                <span>Toggle</span>
+              </button>
+            </div>
+          )}
         </div>
         {displayContribs ? (
           <BarGraph
@@ -134,6 +139,7 @@ const BarDay = ({ data }) => {
 
 BarDay.propTypes = {
   data: PropTypes.object.isRequired,
+  downloadLoading: PropTypes.bool.isRequired,
 };
 
 export { BarMonth, BarDay };
diff --git a/frontend/src/components/Wrapped/Specifics/Pie.js b/frontend/src/components/Wrapped/Specifics/Pie.js
index 153657eb..cd727abb 100644
--- a/frontend/src/components/Wrapped/Specifics/Pie.js
+++ b/frontend/src/components/Wrapped/Specifics/Pie.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { PieChart } from '../Templates';
 import { WrappedCard } from '../Organization';
 
-const PieLangs = ({ data }) => {
+const PieLangs = ({ data, downloadLoading }) => {
   const [useLOCAdded, setUseLOCAdded] = React.useState(false);
 
   const metric = useLOCAdded ? 'added' : 'changed';
@@ -20,15 +20,17 @@ const PieLangs = ({ data }) => {
             <p className="text-xl font-semibold">Most Used Languages</p>
             <p>{useLOCAdded ? 'By LOC Added' : 'By LOC Changed'}</p>
           </div>
-          <div className="flex-shrink-0">
-            <button
-              type="button"
-              className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
-              onClick={() => setUseLOCAdded(!useLOCAdded)}
-            >
-              <span>Toggle</span>
-            </button>
-          </div>
+          {!downloadLoading && (
+            <div className="flex-shrink-0">
+              <button
+                type="button"
+                className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
+                onClick={() => setUseLOCAdded(!useLOCAdded)}
+              >
+                <span>Toggle</span>
+              </button>
+            </div>
+          )}
         </div>
         <PieChart
           data={newData}
@@ -43,9 +45,10 @@ const PieLangs = ({ data }) => {
 
 PieLangs.propTypes = {
   data: PropTypes.object.isRequired,
+  downloadLoading: PropTypes.bool.isRequired,
 };
 
-const PieRepos = ({ data }) => {
+const PieRepos = ({ data, downloadLoading }) => {
   const [useLOCAdded, setUseLOCAdded] = React.useState(false);
 
   const metric = useLOCAdded ? 'added' : 'changed';
@@ -59,15 +62,17 @@ const PieRepos = ({ data }) => {
             <p className="text-xl font-semibold">Most Active Repositories</p>
             <p>{useLOCAdded ? 'By LOC Added' : 'By LOC Changed'}</p>
           </div>
-          <div className="flex-shrink-0">
-            <button
-              type="button"
-              className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
-              onClick={() => setUseLOCAdded(!useLOCAdded)}
-            >
-              <span>Toggle</span>
-            </button>
-          </div>
+          {!downloadLoading && (
+            <div className="flex-shrink-0">
+              <button
+                type="button"
+                className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
+                onClick={() => setUseLOCAdded(!useLOCAdded)}
+              >
+                <span>Toggle</span>
+              </button>
+            </div>
+          )}
         </div>
         <PieChart
           data={newData}
@@ -87,6 +92,7 @@ const PieRepos = ({ data }) => {
 
 PieRepos.propTypes = {
   data: PropTypes.object.isRequired,
+  downloadLoading: PropTypes.bool.isRequired,
 };
 
 export { PieLangs, PieRepos };
diff --git a/frontend/src/pages/Wrapped/Wrapped.js b/frontend/src/pages/Wrapped/Wrapped.js
index 961ef180..65478d92 100644
--- a/frontend/src/pages/Wrapped/Wrapped.js
+++ b/frontend/src/pages/Wrapped/Wrapped.js
@@ -97,9 +97,11 @@ const WrappedScreen = () => {
       >
         <WrappedSection useTitle={false}>
           <div className="w-full h-auto flex flex-row flex-wrap -mb-4">
-            <Link to="/wrapped">
-              <LeftArrowIcon className="absolute ml-2 mt-2 h-8 w-8 text-gray-500 hover:text-gray-800" />
-            </Link>
+            {!downloadLoading && (
+              <Link to="/wrapped">
+                <LeftArrowIcon className="absolute ml-2 mt-2 h-8 w-8 text-gray-500 hover:text-gray-800" />
+              </Link>
+            )}
             <p className="text-xl font-semibold text-center w-full">
               {`${userId}'s`}
             </p>
@@ -224,10 +226,10 @@ const WrappedScreen = () => {
         </WrappedSection>
         <WrappedSection title="Lines of Code (LOC) Analysis">
           <div className="w-full md:w-1/2 xl:w-1/3">
-            <PieLangs data={data} />
+            <PieLangs data={data} downloadLoading={downloadLoading} />
           </div>
           <div className="w-full md:w-1/2 xl:w-1/3">
-            <PieRepos data={data} />
+            <PieRepos data={data} downloadLoading={downloadLoading} />
           </div>
           <div className="w-full xl:w-1/3 flex flex-wrap">
             <div className="w-full md:w-1/2 lg:w-1/4 xl:w-1/2">
@@ -262,18 +264,18 @@ const WrappedScreen = () => {
             <Radar data={data} />
           </div>
           <div className="w-full lg:w-2/3">
-            <BarMonth data={data} />
+            <BarMonth data={data} downloadLoading={downloadLoading} />
           </div>
           <div className="w-full lg:w-2/3">
-            <BarDay data={data} />
+            <BarDay data={data} downloadLoading={downloadLoading} />
           </div>
           <div className="w-full lg:w-1/3">
             <SwarmDay data={data} />
           </div>
         </WrappedSection>
         {downloadLoading && (
-          <div className="text-2xl md:text-3xl lg:text-4xl font-bold text-blue-500">
-            Get your own at www.githubtrends.io/wrapped
+          <div className="text-center text-2xl md:text-3xl lg:text-4xl font-bold text-blue-500">
+            Create your own at www.githubtrends.io/wrapped
           </div>
         )}
       </div>
@@ -286,7 +288,7 @@ const WrappedScreen = () => {
             setTimeout(() => {
               downloadImage();
               setDownloadLoading(false);
-            }, 1000);
+            }, 10);
           }}
         >
           {downloadLoading ? (