Add loader until page loads completely

src/css/App.css

@@ -292,6 +292,14 @@ label .MuiIconButton-label > input {
   column-gap: 2px;
 }
 
+.page-loader-container {
+  width: 30%;
+  height: min-content;
+  line-height: 0;
+  border-radius: 150px;
+  background: var(--primary-color-dark);
+}
+
 .page-loader {
   margin: auto;
   width: 30%;
@@ -395,6 +403,10 @@ label .MuiIconButton-label > input {
   visibility: hidden;
 }
 
+.transparent {
+  opacity: 0 !important;
+}
+
 @media screen and (max-width: 420px) {
   .progress-history-container > div > *:nth-child(2), .progress-history-container--complete > div > *:nth-last-child(3), .progress-history-container--incomplete > div > *:nth-last-child(4) {
     display: none;

src/css/PopUp.css

@@ -10,6 +10,11 @@
 	cursor: default;
 }
 
+.overlay--black {
+	background-color: var(--background-color);
+	opacity: 0.8;
+}
+
 .popup-close-button {
 	position: absolute;
 	top: 24px;