feat: loader on deleting groups

Real-Dev-Squad · Dec 2, 2024 · 3126f60 · 3126f60
1 parent f37f836
commit 3126f60
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/groups/render.js b/groups/render.js
@@ -87,6 +87,27 @@ const removeLoadingCards = () => {
   loadingCards.forEach((card) => mainContainer.removeChild(card));
 };
 
+const renderLoader = () => {
+  const loaderContainer = document.querySelector('.loader');
+
+  if (!loaderContainer) {
+    const loaderContainer = document.createElement('div');
+    loaderContainer.className = 'loader';
+    loaderContainer.innerHTML = `
+      <div class="loader-spin"></div>
+    `;
+
+    document.body.appendChild(loaderContainer);
+  }
+};
+
+const removeLoader = () => {
+  const loader = document.querySelector('.loader');
+  if (loader) {
+    document.body.removeChild(loader);
+  }
+};
+
 const renderGroupById = ({
   group,
   cardOnClick = () => {},
@@ -148,4 +169,6 @@ export {
   renderNoGroupFound,
   renderDeleteConfirmationModal,
   removeDeleteConfirmationModal,
+  renderLoader,
+  removeLoader,
 };
diff --git a/groups/script.js b/groups/script.js
@@ -13,6 +13,8 @@ import {
   renderNotAuthenticatedPage,
   renderDeleteConfirmationModal,
   removeDeleteConfirmationModal,
+  renderLoader,
+  removeLoader,
 } from './render.js';
 
 import {
@@ -300,6 +302,7 @@ function showDeleteModal(groupId) {
       removeDeleteConfirmationModal();
     },
     onConfirm: async () => {
+      renderLoader();
       try {
         await deleteDiscordGroupRole(groupId);
         showToaster('Group deleted successfully');
@@ -316,6 +319,7 @@ function showDeleteModal(groupId) {
         showToaster(error.message || 'Failed to delete group');
       } finally {
         removeDeleteConfirmationModal();
+        removeLoader();
       }
     },
   });

diff --git a/groups/style.css b/groups/style.css
@@ -699,3 +699,39 @@ For Delete Confirmation Modal
 .button--danger:hover {
   background-color: #c82333;
 }
+
+/*
+For Spin Loader
+*/
+
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.loader-spin {
+  border: 8px solid #f3f3f3;
+  border-top: 8px solid #345bdb;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}