https://forens.ai/src/components/processing.js?v=3

1// Processing Component - Now an overlay instead of a page
2function renderProcessing() {
3  // This is kept for backwards compatibility but should not be used
4  // The overlay is shown via showProcessingOverlay() instead
5  return renderResults([], null);
6}
7
8// Processing Overlay Functions
9function showProcessingOverlay(initialMessage = 'Analyzing...') {
10  // Add processing-active class to results page (if on results page)
11  const resultsPage = document.querySelector('.results-page');
12  if (resultsPage) {
13    resultsPage.classList.add('processing-active');
14  }
15  
16  // Add processing-active class to dashboard page (if on dashboard)
17  const dashboardPage = document.querySelector('.dashboard-page');
18  if (dashboardPage) {
19    dashboardPage.classList.add('processing-active');
20  }
21  
22  // Add processing-active class to landing page (if on landing page)
23  const landingPage = document.querySelector('.landing-page');
24  if (landingPage) {
25    landingPage.classList.add('processing-active');
26  }
27  
28  // Create or get overlay
29  let overlay = document.getElementById('processing-overlay');
30  if (!overlay) {
31    overlay = document.createElement('div');
32    overlay.id = 'processing-overlay';
33    overlay.className = 'processing-overlay';
34    overlay.innerHTML = `
35      <div class="processing-overlay-backdrop"></div>
36      <div class="processing-overlay-card">
37        <div class="processing-spinner-container">
38          <div class="processing-spinner"></div>
39        </div>
40        <h2 class="processing-headline"><span class="forensai-logo-forens">Forens</span><span class="logo-ai">AI</span></h2>
41        <p class="processing-status pixel-label" id="processing-status-text">${initialMessage}</p>
42        <div class="processing-progress-container">
43          <div class="processing-progress-bar">
44            <div class="processing-progress-fill" id="processing-progress-fill"></div>
45          </div>
46          <span class="processing-progress-text pixel-label" id="processing-progress-text">0%</span>
47        </div>
48        <p class="processing-reassurance">Your files never leave your browser</p>
49      </div>
50    `;
51    document.body.appendChild(overlay);
52  }
53  
54  // Show overlay
55  overlay.classList.add('active');
56  
57  // Update initial message
58  const statusText = document.getElementById('processing-status-text');
59  if (statusText) {
60    statusText.textContent = initialMessage;
61  }
62}
63
64function updateProcessingOverlay(progress, message) {
65  const overlay = document.getElementById('processing-overlay');
66  if (!overlay) return;
67  
68  // Update progress bar
69  const progressFill = document.getElementById('processing-progress-fill');
70  if (progressFill) {
71    progressFill.style.width = `${progress}%`;
72  }
73  
74  // Update progress text
75  const progressText = document.getElementById('processing-progress-text');
76  if (progressText) {
77    progressText.textContent = `${Math.round(progress)}%`;
78  }
79  
80  // Update status message
81  const statusText = document.getElementById('processing-status-text');
82  if (statusText && message) {
83    statusText.textContent = message;
84  }
85}
86
87function hideProcessingOverlay() {
88  const overlay = document.getElementById('processing-overlay');
89  if (overlay) {
90    overlay.classList.remove('active');
91    // Remove after animation
92    setTimeout(() => {
93      if (overlay && !overlay.classList.contains('active')) {
94        overlay.remove();
95      }
96    }, 300);
97  }
98  
99  // Remove processing state from results page
100  const resultsPage = document.querySelector('.results-page');
101  if (resultsPage) {
102    resultsPage.classList.remove('processing-active');
103  }
104  
105  // Remove processing state from dashboard page
106  const dashboardPage = document.querySelector('.dashboard-page');
107  if (dashboardPage) {
108    dashboardPage.classList.remove('processing-active');
109  }
110  
111  // Remove processing state from landing page
112  const landingPage = document.querySelector('.landing-page');
113  if (landingPage) {
114    landingPage.classList.remove('processing-active');
115  }
116}
117
118// Legacy function for backwards compatibility
119function updateProcessingStatus(status, file, progress) {
120  updateProcessingOverlay(progress || 0, status);
121}