fix loading user templates

Author: hatemhosny

src/livecodes/UI/templates.ts

@@ -2,10 +2,7 @@ import { templatesScreen } from '../html';
 import type { EventsManager, Template } from '../models';
 import { debounce } from '../utils/utils';
 
-export const createTemplatesContainer = (
-  eventsManager: EventsManager,
-  loadUserTemplates: () => void,
-) => {
+export const createTemplatesContainer = (eventsManager: EventsManager) => {
   const div = document.createElement('div');
   div.innerHTML = templatesScreen;
   const templatesContainer = div.firstChild as HTMLElement;
@@ -23,9 +20,6 @@ export const createTemplatesContainer = (
       });
       const target = templatesContainer.querySelector('#' + link.dataset.target);
       target?.classList.add('active');
-      if (link.dataset.target === 'templates-user') {
-        loadUserTemplates();
-      }
     });
   });
   setupTemplatesSearch(templatesContainer);
@@ -54,12 +48,12 @@ export const noUserTemplates = () => `
   <div class="description alert">${window.deps.translateString('templates.noUserTemplates.heading', 'You have no saved templates.')}</div>
   <div class="description help">
     ${window.deps.translateString(
-  'templates.noUserTemplates.desc',
-  'You can save a project as a template from <wbr />(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
-  {
-    isHTML: true,
-  },
-)}
+      'templates.noUserTemplates.desc',
+      'You can save a project as a template from <wbr />(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
+      {
+        isHTML: true,
+      },
+    )}
   </div>
 </div>
 `;

src/livecodes/core.ts

@@ -3147,10 +3147,10 @@ const handleLogout = () => {
 };
 
 const handleNew = () => {
-  const templatesContainer = createTemplatesContainer(eventsManager, () => loadUserTemplates());
-  const userTemplatesScreen = UI.getUserTemplatesScreen(templatesContainer);
+  const templatesContainer = createTemplatesContainer(eventsManager);
 
   const loadUserTemplates = async () => {
+    const userTemplatesScreen = UI.getUserTemplatesScreen(templatesContainer);
     const defaultTemplate = getAppData()?.defaultTemplate;
     const userTemplates = ((await stores.templates?.getList()) || []).sort((a, b) =>
       a.id === defaultTemplate ? -1 : b.id === defaultTemplate ? 1 : 0,
@@ -3288,7 +3288,8 @@ const handleNew = () => {
         });
     }
 
-    setTimeout(() => UI.getStarterTemplatesTab(templatesContainer)?.click());
+    loadUserTemplates();
+    requestAnimationFrame(() => UI.getStarterTemplatesTab(templatesContainer)?.click());
     modal.show(templatesContainer, { isAsync: true });
   };