fix(zendesk): Button not showing up sometimes (#2184)

Closes #2183

Author: Alissonsz

src/content/zendesk.js

@@ -7,71 +7,75 @@
 'use strict';
 
 // Zendesk new UI Jul 2021
-togglbutton.render(
-  '.omni-conversation-pane>div>div:first-child:not(.toggl)',
-  { observe: true },
-  (elem) => {
-    const getProject = () => {
-      const title = document.querySelector('title');
-      return title ? title.textContent.trim() : '';
-    };
-
-    const getDescription = () => {
-      const ticketId = document.querySelector('header div[data-selected=true]').attributes['data-entity-id'].value || ''
-
-      const input = elem.querySelector('input[aria-label=Subject]');
-      const title = (input ? input.value : '').trim();
-
-      return [`#${ticketId}`, title].filter(Boolean).join(' ');
-    };
-
-    const link = togglbutton.createTimerLink({
-      buttonType: 'minimal',
-      className: 'zendesk--2021',
-      description: getDescription,
-      projectName: getProject
-    });
-
-    elem.appendChild(link);
-  }
-);
+setTimeout(() => {
+  togglbutton.render(
+    '.omni-conversation-pane>div>div:first-child:not(.toggl)',
+    { observe: true },
+    (elem) => {
+      const getProject = () => {
+        const title = document.querySelector('title');
+        return title ? title.textContent.trim() : '';
+      };
+
+      const getDescription = () => {
+        const ticketId = document.querySelector('header div[data-selected=true]').attributes['data-entity-id'].value || ''
+
+        const input = elem.querySelector('input[aria-label=Subject]');
+        const title = (input ? input.value : '').trim();
+
+        return [`#${ticketId}`, title].filter(Boolean).join(' ');
+      };
+
+      const link = togglbutton.createTimerLink({
+        buttonType: 'minimal',
+        className: 'zendesk--2021',
+        description: getDescription,
+        projectName: getProject
+      });
+
+      elem.appendChild(link);
+    }
+  );
+}, 1000);
 
 // Zendesk pre-2021
-togglbutton.render(
-  '.pane_header:not(.toggl)',
-  { observe: true },
-  function (elem) {
-    let description;
-    const projectName = $('title').textContent;
-
-    const titleFunc = function () {
-      const titleElem = $('.editable .ember-view input', elem);
-      const ticketNum = location.href.match(/tickets\/(\d+)/);
-
-      if (titleElem !== null) {
-        description = titleElem.value.trim();
+setTimeout(() => {
+  togglbutton.render(
+    '.pane_header:not(.toggl)',
+    { observe: true },
+    function (elem) {
+      let description;
+      const projectName = $('title').textContent;
+
+      const titleFunc = function () {
+        const titleElem = $('.editable .ember-view input', elem);
+        const ticketNum = location.href.match(/tickets\/(\d+)/);
+
+        if (titleElem !== null) {
+          description = titleElem.value.trim();
+        }
+
+        if (ticketNum) {
+          description = '#' + ticketNum[1].trim() + ' ' + description;
+        }
+        return description;
+      };
+
+      const link = togglbutton.createTimerLink({
+        className: 'zendesk',
+        description: titleFunc,
+        projectName: projectName && projectName.split(' - ').shift()
+      });
+
+      // Check for strange duplicate buttons. Don't know why this happens in Zendesk.
+      if (elem.querySelector('.toggl-button')) {
+        elem.removeChild(elem.querySelector('.toggl-button'));
       }
 
-      if (ticketNum) {
-        description = '#' + ticketNum[1].trim() + ' ' + description;
-      }
-      return description;
-    };
-
-    const link = togglbutton.createTimerLink({
-      className: 'zendesk',
-      description: titleFunc,
-      projectName: projectName && projectName.split(' - ').shift()
-    });
-
-    // Check for strange duplicate buttons. Don't know why this happens in Zendesk.
-    if (elem.querySelector('.toggl-button')) {
-      elem.removeChild(elem.querySelector('.toggl-button'));
+      elem.insertBefore(link, elem.querySelector('.btn-group'));
     }
-
-    elem.insertBefore(link, elem.querySelector('.btn-group'));
-  }
-);
+  );
+}, 1000);
 
 const getDescription = () => {
   const ticketNum = location.href.match(/tickets\/(\d+)/);
@@ -86,20 +90,22 @@ const getDescription = () => {
   return '#' + id + ' ' + titleElem.value.trim();
 };
 
-togglbutton.render(
-  '[data-test-id="customer-context-tab-navigation"]',
-  { observe: true },
-  function (elem) {
-    // Manual check for existence in this SPA.
-    if (elem.querySelector('.toggl-button')) return;
-    // If we can't get the description on this pass, let's skip and wait for the next one
-    if (!getDescription()) return;
-
-    const link = togglbutton.createTimerLink({
-      className: 'zendesk-agent-ws',
-      description: getDescription
-    });
-
-    elem.prepend(link);
-  }
-);
+setTimeout(() => {
+  togglbutton.render(
+    '[data-test-id="customer-context-tab-navigation"]',
+    { observe: true },
+    function (elem) {
+      // Manual check for existence in this SPA.
+      if (elem.querySelector('.toggl-button')) return;
+      // If we can't get the description on this pass, let's skip and wait for the next one
+      if (!getDescription()) return;
+  
+      const link = togglbutton.createTimerLink({
+        className: 'zendesk-agent-ws',
+        description: getDescription
+      });
+  
+      elem.prepend(link);
+    }
+  );  
+}, 1000);