🐛 Loader not aligning to the center issue solved.

main.css

@@ -49,7 +49,7 @@ body {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
-    min-height: 32rem;
+    /* min-height: 32rem; */
     padding-block-end: 6.6rem;
 }
 .main[interact="false"]{

main.js

@@ -115,4 +115,14 @@ const create = (result) => {
 // Event listener for close button in result shower.
 document.querySelector(".close-btn").addEventListener("click", () => {
     resultContainer.setAttribute("show", "false");
-})
+})
+
+// Setting the height (min height) of main container for aligning loader in the center.
+const tool = document.querySelector(".tool") // Selecting the tool container.
+const resizeLoader = () => {
+    const toolBoxHeight = tool.clientHeight // Getting the height of the toolbox
+    const mainTop = main.getBoundingClientRect().top // Getting the top bound of main element (element to top of the window).
+    main.style.minHeight = `calc(100vh - ${toolBoxHeight + mainTop }px - 1.5rem)` // Setting the min height to the main element, because the loader wrapper is inside the main container.
+}
+resizeLoader() // calling the resize function.
+window.addEventListener("resize", resizeLoader) // adding a resize event listener on document.