enhancement: added shimmer effect

__tests__/extension-requests/extension-requests.test.js

@@ -641,6 +641,54 @@ describe('Tests the Extension Requests Screen', () => {
     expect(cardCount === 3 || cardCount === 7).toBe(true);
   });
 
+  it('checks whether the shimmer effect is visible under dev flag only for the assignee image element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const assignImageSelector = await page.$$(
+      '[data-testid="assignee-image skeleton"]',
+    );
+    expect(assignImageSelector).toBeTruthy();
+
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.assignee-image', (el) =>
+      el.classList.contains('skeleton'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is visible under dev flag only for the assignee name element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const assignNameSelector = await page.$$(
+      '[data-testid="assignee-name skeleton-text"]',
+    );
+    expect(assignNameSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.assignee-name', (el) =>
+      el.classList.contains('skeleton-text'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is visible under dev flag only for the statusSiteLink element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const statusSiteLinkSelector = await page.$$(
+      '[data-testid="external-link skeleton-link"]',
+    );
+    expect(statusSiteLinkSelector).toBeTruthy();
+    await page.waitForTimeout(5000);
+    const hasSkeletonClassAfter = await page.$eval('.external-link', (el) =>
+      el.classList.contains('skeleton-link'),
+    );
+    expect(hasSkeletonClassAfter).toBe(false);
+  });
+
+  it('checks whether the shimmer effect is visible under dev flag only for the taskStatusValue element', async () => {
+    await page.goto(`${baseUrl}/?dev=true`);
+    const taskStatusValueElement = await page.$$(
+      '[data-testid="skeleton-span"]',
+    );
+    expect(taskStatusValueElement).toBeTruthy();
+  });
+
   it('Checks whether the card is not removed from display when api call is unsuccessful', async () => {
     const extensionCards = await page.$$('.extension-card');
 

extension-requests/script.js

@@ -240,7 +240,11 @@ async function populateExtensionRequests(query = {}, newLink) {
       return;
     }
     for (let data of allExtensionRequests) {
-      createExtensionCard(data);
+      if (query.dev) {
+        createExtensionCard(data, true);
+      } else {
+        createExtensionCard(data);
+      }
     }
     initializeAccordions();
   } catch (error) {
@@ -260,7 +264,11 @@ const intersectionObserver = new IntersectionObserver(async (entries) => {
     return;
   }
   if (entries[0].isIntersecting && !isDataLoading) {
-    await populateExtensionRequests({}, nextLink);
+    if (isDev) {
+      await populateExtensionRequests({ dev: true }, nextLink);
+    } else {
+      await populateExtensionRequests({}, nextLink);
+    }
   }
 });
 
@@ -462,16 +470,20 @@ const handleFormPropagation = async (event) => {
   event.preventDefault();
 };
 
-async function createExtensionCard(data) {
+async function createExtensionCard(data, dev) {
   renderLogRecord[data.id] = [];
   //Create card element
   const rootElement = createElement({
     type: 'div',
     attributes: { class: 'extension-card' },
   });
   extensionRequestsContainer.appendChild(rootElement);
-  const removeSpinner = addSpinner(rootElement);
-  rootElement.classList.add('disabled');
+  let removeSpinner;
+  if (!dev) {
+    removeSpinner = addSpinner(rootElement);
+    rootElement.classList.add('disabled');
+  }
+
   //Api calls
   const userDataPromise = getUser(data.assignee);
   const taskDataPromise = getTaskDetails(data.taskId);
@@ -569,12 +581,24 @@ async function createExtensionCard(data) {
     type: 'div',
     attributes: { class: 'details-container' },
   });
-  const statusSiteLink = createElement({
-    type: 'a',
-    attributes: {
-      class: 'external-link',
-    },
-  });
+
+  let statusSiteLink;
+  if (dev) {
+    statusSiteLink = createElement({
+      type: 'a',
+      attributes: {
+        class: 'external-link skeleton-link',
+        'data-testid': 'external-link skeleton-link',
+      },
+    });
+  } else {
+    statusSiteLink = createElement({
+      type: 'a',
+      attributes: {
+        class: 'external-link',
+      },
+    });
+  }
   const taskTitle = createElement({
     type: 'span',
     attributes: { class: 'task-title' },
@@ -647,9 +671,21 @@ async function createExtensionCard(data) {
     innerText: 'Task status ',
   });
   taskStatusContainer.appendChild(taskStatusText);
-  const taskStatusValue = createElement({
-    type: 'span',
-  });
+
+  let taskStatusValue;
+  if (dev) {
+    taskStatusValue = createElement({
+      type: 'span',
+      attributes: {
+        class: 'skeleton-span',
+        'data-testid': 'skeleton-span',
+      },
+    });
+  } else {
+    taskStatusValue = createElement({
+      type: 'span',
+    });
+  }
   taskStatusContainer.appendChild(taskStatusValue);
   const datesContainer = createElement({
     type: 'div',
@@ -765,16 +801,40 @@ async function createExtensionCard(data) {
     innerText: 'Assigned to',
   });
   assigneeContainer.appendChild(assigneeText);
-  const assigneeImage = createElement({
-    type: 'img',
-    attributes: { class: 'assignee-image' },
-  });
+  let assigneeImage;
+  if (dev) {
+    assigneeImage = createElement({
+      type: 'img',
+      attributes: {
+        class: 'assignee-image skeleton',
+        'data-testid': 'assignee-image skeleton',
+      },
+    });
+  } else {
+    assigneeImage = createElement({
+      type: 'img',
+      attributes: { class: 'assignee-image' },
+    });
+  }
   assigneeContainer.appendChild(assigneeImage);
-  const assigneeNameElement = createElement({
-    type: 'span',
-    attributes: { class: 'assignee-name' },
-  });
+
+  let assigneeNameElement;
+  if (dev) {
+    assigneeNameElement = createElement({
+      type: 'span',
+      attributes: {
+        class: 'assignee-name skeleton-text',
+        'data-testid': 'assignee-name skeleton-text',
+      },
+    });
+  } else {
+    assigneeNameElement = createElement({
+      type: 'span',
+      attributes: { class: 'assignee-name' },
+    });
+  }
   assigneeContainer.appendChild(assigneeNameElement);
+
   const extensionCardButtons = createElement({
     type: 'div',
     attributes: { class: 'extension-card-buttons' },
@@ -1198,10 +1258,22 @@ async function createExtensionCard(data) {
     userFirstName = userFirstName ?? '';
     statusSiteLink.href = `${STATUS_BASE_URL}/tasks/${data.taskId}`;
     statusSiteLink.innerText = taskData.title;
+    if (dev) {
+      statusSiteLink.classList.remove('skeleton-link');
+    }
     assigneeImage.src = userImage;
+    if (dev) {
+      assigneeImage.classList.remove('skeleton');
+    }
     assigneeImage.alt = userFirstName;
     assigneeNameElement.innerText = userFirstName;
+    if (dev) {
+      assigneeNameElement.classList.remove('skeleton-text');
+    }
     taskStatusValue.innerText = ` ${taskStatus}`;
+    if (dev) {
+      taskStatusValue.classList.remove('skeleton-span');
+    }
     CommitedHourslabel.innerText = 'Commited Hours:';
     if (comittedHours) {
       CommitedHoursContent.innerText = `${comittedHours / 4} hrs / week`;
@@ -1210,9 +1282,11 @@ async function createExtensionCard(data) {
       CommitedHoursContent.classList.add('label-content-missing');
     }
 
-    removeSpinner();
-    renderExtensionCreatedLog();
-    rootElement.classList.remove('disabled');
+    if (!dev) {
+      removeSpinner();
+      renderExtensionCreatedLog();
+      rootElement.classList.remove('disabled');
+    }
   });
   return rootElement;
 

extension-requests/style.css

@@ -166,6 +166,40 @@
   background-color: var(--green500);
 }
 
+.skeleton {
+  width: 1.5rem; /* Adjust the width */
+  height: 1.5rem; /* Ensure height is the same as width */
+  border-radius: 50%; /* Makes it a circle */
+  animation: skeleton-loading 1s linear infinite alternate; /* Loading animation */
+}
+.skeleton-text,
+.skeleton-link,
+.skeleton-span {
+  width: 3rem; /* Common width for all skeleton elements */
+  height: 1rem; /* Common height for all skeleton elements */
+  background-color: hsl(200, 20%, 70%);
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+.skeleton-link,
+.skeleton-span,
+.skeleton-text {
+  width: 8rem; /* Increased width for links, spans, and text */
+  display: inline-flex;
+  border-radius: 0.125rem; /* Less rounded corners */
+  line-height: 3rem; /* Align with the text height */
+}
+
+/* Animation keyframes */
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 70%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 80%);
+  }
+}
+
 .edit-button {
   background: none;
   border: none;