From b0a763c008a64cf4a33f710409d8b3c9dde8eaed Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 22:53:45 +0000
Subject: [PATCH] perf: optimize cursor loading by deferring heavy operations

- Move ASCII art and file preloading after terminal initialization
- Process images in batches with delays to prevent blocking main thread
- Load remote files asynchronously with staggered timing
- Add lazy loading fallback for ASCII art on-demand
- Resolves slow cursor loading issue #86

Co-authored-by: kanetronv2 <kanetronv2@users.noreply.github.com>
---
 config/fs.js       | 22 ++++++++++++++++++----
 js/ascii-art.js    | 43 ++++++++++++++++++++++++++++++++++++-------
 js/terminal-ext.js |  8 ++++++--
 3 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/config/fs.js b/config/fs.js
index 9c9e893f..6fbf1b29 100644
--- a/config/fs.js
+++ b/config/fs.js
@@ -36,13 +36,27 @@ for (const [key, values] of Object.entries(_DIRS)) {
 }
 
 function preloadFiles() {
-  for (kv of Object.entries(_REMOTE_FILES)) {
-    _loadFile(kv[0]);
-  }
-
+  // Load local files immediately as they're already available
   for (kv of Object.entries(_LOCAL_FILES)) {
     _insertFileToDOM(kv[0], kv[1]);
   }
+
+  // Load remote files asynchronously with delays to avoid blocking
+  const remoteFiles = Object.entries(_REMOTE_FILES);
+  let index = 0;
+  
+  function loadNextFile() {
+    if (index < remoteFiles.length) {
+      _loadFile(remoteFiles[index][0]);
+      index++;
+      setTimeout(loadNextFile, 100);
+    }
+  }
+  
+  // Start loading remote files after a delay
+  if (remoteFiles.length > 0) {
+    setTimeout(loadNextFile, 50);
+  }
 }
 
 function _loadFile(name) {
diff --git a/js/ascii-art.js b/js/ascii-art.js
index 16fd46af..e57d6c9e 100644
--- a/js/ascii-art.js
+++ b/js/ascii-art.js
@@ -14,16 +14,33 @@ __    __         _
 `.replaceAll("\n", "\r\n");
 
 function preloadASCIIArt() {
-  const companies = Object.keys(portfolio);
-  for (c of companies) {
-    _loadArt(c, 0.5, 1.0, 'jpg', false);
-  }
-
+  // Load rootvc logo first as it's most commonly used
   _loadArt("rootvc-square", 1.0, term.cols >= 60 ? 0.5 : 1.0, 'png', false);
+  
+  // Load other assets in small batches with delays to avoid blocking
+  const companies = Object.keys(portfolio);
   const people = Object.keys(team);
-  for (p of people) {
-    _loadArt(p, 1.0, term.cols >= 60 ? 0.5 : 1.0, 'png', true);
+  const allItems = [
+    ...companies.map(c => ({id: c, ratio: 0.5, scale: 1.0, ext: 'jpg', inverse: false})),
+    ...people.map(p => ({id: p, ratio: 1.0, scale: term.cols >= 60 ? 0.5 : 1.0, ext: 'png', inverse: true}))
+  ];
+  
+  let index = 0;
+  function loadNextBatch() {
+    const batchSize = 3;
+    for (let i = 0; i < batchSize && index < allItems.length; i++) {
+      const item = allItems[index];
+      _loadArt(item.id, item.ratio, item.scale, item.ext, item.inverse);
+      index++;
+    }
+    
+    if (index < allItems.length) {
+      setTimeout(loadNextBatch, 100);
+    }
   }
+  
+  // Start loading after a delay
+  setTimeout(loadNextBatch, 200);
 }
 
 // TODO: Here is where we should insert alternatives to ASCII as text
@@ -58,5 +75,17 @@ function _loadArt(id, ratio, scale, ext, inverse, callback) {
 
 function getArt(id) {
   const div = document.getElementById(id);
+  if (!div || !div.innerText) {
+    // If art isn't loaded yet, load it immediately
+    if (id === "rootvc-square") {
+      _loadArt(id, 1.0, term.cols >= 60 ? 0.5 : 1.0, 'png', false);
+    } else if (Object.keys(portfolio).includes(id)) {
+      _loadArt(id, 0.5, 1.0, 'jpg', false);
+    } else if (Object.keys(team).includes(id)) {
+      _loadArt(id, 1.0, term.cols >= 60 ? 0.5 : 1.0, 'png', true);
+    }
+    // Return a placeholder while loading
+    return `Loading ${id}...`;
+  }
   return div.innerText.replaceAll("\n", "\n\r");
 }
\ No newline at end of file
diff --git a/js/terminal-ext.js b/js/terminal-ext.js
index 62b80eae..e63f4e31 100644
--- a/js/terminal-ext.js
+++ b/js/terminal-ext.js
@@ -169,8 +169,6 @@ extend = (term) => {
 
   term.init = (user = "guest", preserveHistory = false) => {
     fitAddon.fit();
-    preloadASCIIArt();
-    preloadFiles();
     term.reset();
     term.printLogoType();
     term.stylePrint(
@@ -190,6 +188,12 @@ extend = (term) => {
       term.history = [];
     }
     term.focus();
+    
+    // Defer heavy operations to avoid blocking cursor
+    setTimeout(() => {
+      preloadASCIIArt();
+      preloadFiles();
+    }, 100);
   };
 
   term.runDeepLink = () => {