Crowdfunding eats lot of CPU in open tab

Describe the bug When crowdfunding app is opened in browser and the tab is selected, it causes high CPU usage. My system shows 20-50% CPUusage and the fan spins violently. The problem occurs in logged-in session as well as in non-logged in session in at least two quite different deployments.

To Reproduce the bug Steps to reproduce the reported bug:

1. Create a crowdfunding app
2. Open the crowdfunding app
3. Wait a few seconds
4. Check system monitor - see high usage
5. Switch to other tab
6. Wait a bit - see lower usage
7. Switch back (usage will rise again)
8. Switch window or desktop (on Linux)
9. CPU usage is still high
10. Go back, kill the tab
11. CPU usage drops again

Expected behavior

CPU usage is not (significantly) higher than usual.

Your BTCPay Environment (please complete the following information):

I’ve tested this in two environments:

Debian

• BTCPay Server Version: 1.1.1
• Deployment Method: Debian package
• Browser: Firefox 78.11esr

Docker

• BTCPay Server Version: 1.1.2
• Deployment Method: official docker with altcoins
• Browser: Firefox 78.11esr

Logs (if applicable)

Browser console from Debian deployment

UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }
crowdfund-bundle-1.min.js:39:76032
UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }
crowdfund-bundle-1.min.js:39:76032
UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }
crowdfund-bundle-1.min.js:39:76032
UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }
crowdfund-bundle-1.min.js:39:76032
UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }
crowdfund-bundle-1.min.js:39:76032
UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }
crowdfund-bundle-1.min.js:39:76032
UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }
crowdfund-bundle-1.min.js:39:76032
[2021-06-29T09:27:03.545Z] Error: Connection disconnected with error 'Error: Server timeout elapsed without receiving a message from the server.'. crowdfund-bundle-1.min.js:39:27387
Connection was closed. Attempting reconnect in 2s crowdfund-bundle-1.min.js:39:79494
[2021-06-29T09:27:41.071Z] Error: Failed to start the transport 'WebSockets': null crowdfund-bundle-1.min.js:39:27387
Firefox can’t establish a connection to the server at wss://<censored>/btcpay/apps/hub?id=jihrWvVLnoMZ22FX4qh1gg. crowdfund-bundle-1.min.js:39:52617
[2021-06-29T09:27:41.123Z] Information: SSE connected to https://<censored>/btcpay/apps/hub?id=nfTss9osR-yqwWAnLt5tiA crowdfund-bundle-1.min.js:39:27590
UPDATED 
Object { hubPath: Getter & Setter, storeId: Getter & Setter, appId: Getter & Setter, title: Getter & Setter, description: Getter & Setter, mainImageUrl: Getter & Setter, embeddedCSS: Getter & Setter, customCSSLink: Getter & Setter, startDate: Getter & Setter, endDate: Getter & Setter, … }
 
Arguments { 0: {…}, … }

(Yeah, I will look at the WS issue but I believe it’s unrelated.)

Browser console from docker deployment

GEThttps://<censored>/apps/2na7P5uVzgPr5rQgz9Vz3WTVfVDA/crowdfund
[HTTP/2 200 OK 181ms]

GEThttps://<censored>/main/bootstrap/bootstrap.css
[HTTP/2 304 Not Modified 53ms]

GEThttps://<censored>/main/themes/default-dark.css
[HTTP/2 304 Not Modified 56ms]

GEThttps://<censored>/bundles/crowdfund-bundle-2.min.js?v=4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ
[HTTP/2 304 Not Modified 53ms]

GEThttps://<censored>/bundles/crowdfund-bundle-1.min.js?v=YGHDqgSHpQFWK-pyIy9K9vWf7GZOMVz2SoevYsF1oM8
[HTTP/2 304 Not Modified 53ms]

GEThttps://<censored>/modal/btcpay.js?v=-jwSqeaMb-Bb9vOfh37-sXz_fwgLvuAc3IMcu0fR_rk
[HTTP/2 304 Not Modified 100ms]

GEThttps://<censored>/bundles/crowdfund-bundle.min.css?v=7Fo3ezTq_XJ1jiZoVlYmRhM1_nmX8W4EWYnnTuwK9Oc
[HTTP/2 304 Not Modified 102ms]

[2021-06-29T15:54:37.616Z] Information: Normalizing '/apps/hub' to 'https://<censored>/apps/hub'. crowdfund-bundle-1.min.js:39:27590
GEThttps://<censored>/favicon.ico
[HTTP/2 200 OK 0ms]

GETwss://<censored>/apps/hub?id=3iNvgJ1DgJoQd0YNDyrZKA
[HTTP/1.1 101 Switching Protocols 257ms]

[2021-06-29T15:54:38.398Z] Information: WebSocket connected to wss://<censored>/apps/hub?id=3iNvgJ1DgJoQd0YNDyrZKA.

Setup Parameters

Both have sounds turned off. Other parameters are most likely irrelevant, will provide if needed.

[NicolasDorier]

Fixed for next version by https://github.com/btcpayserver/btcpayserver/pull/2673

[bolatovumar]

Ok, I tested this on a 2017 MacBook Air with a 1.8 Ghz i5 CPU and it does seem like crowdfunding app uses more CPU when sitting idle as compared to other tabs. It’s not so much that my fans spin up or anything though. The reason for this as far as I can tell is because we run an animation function in the loop if you have that enabled for your crowdfund app. Turning that off brings down CPU usage quite a bit on my machine.

I also ran a Chrome performance profiler to compare CPU usage for with vs without animation and it does show significant drop in CPU usage for when animations are disabled.

Before (more CPU usage, mostly from animation running in a loop):

https://drive.google.com/file/d/1k1qgiksFf0h9AuUv-JfOG2vJJ1s2n3rT/view

After (very little CPU usage):

https://drive.google.com/file/d/1gr0Xo17fWJrFfZhXkw1DQ0rb2C6dJnjR/view