Improve live user count

Adds option to show/hide user count and improves its display

Author: AksLolCoding

package.json

@@ -360,6 +360,11 @@
                     "type": "string",
                     "default": "http://20.244.105.138:4546",
                     "description": "The address of the remote server to which the extension will send requests. (Currently used for live user count)"
+                },
+                "cph.general.showLiveUserCount": {
+                    "type": "boolean",
+                    "default": true,
+                    "description": "Whether to show the live user count or not. Turning it off may improve performance."
                 }
             }
         }

src/preferences.ts

@@ -86,6 +86,9 @@ export const getFirstTimePref = (): boolean =>
 export const getRemoteServerAddressPref = (): string =>
     getPreference('general.remoteServerAddress') || '';
 
+export const getLiveUserCountPref = (): boolean =>
+    getPreference('general.showLiveUserCount') || 'true';
+
 export const getDefaultLangPref = (): string | null => {
     const pref = getPreference('general.defaultLanguage');
     if (pref === 'none' || pref == ' ' || !pref) {

src/types.ts

@@ -47,7 +47,8 @@ export type prefSection =
     | 'general.retainWebviewContext'
     | 'general.autoShowJudge'
     | 'general.defaultLanguageTemplateFileLocation'
-    | 'general.remoteServerAddress';
+    | 'general.remoteServerAddress'
+    |  'general.showLiveUserCount';
 
 export type Language = {
     name: LangNames;

src/webview/JudgeView.ts

@@ -10,6 +10,7 @@ import runTestCases from '../runTestCases';
 import {
     getAutoShowJudgePref,
     getRemoteServerAddressPref,
+    getLiveUserCountPref,
     getRetainWebviewContextPref,
 } from '../preferences';
 import { setOnlineJudgeEnv } from '../compiler';
@@ -213,6 +214,8 @@ class JudgeViewProvider implements vscode.WebviewViewProvider {
 
         const remoteServerAddress = getRemoteServerAddressPref();
 
+        const showLiveUserCount = getLiveUserCountPref();
+
         const codiconsUri = webview.asWebviewUri(
             vscode.Uri.joinPath(this._extensionUri, 'dist', 'codicon.css'),
         );
@@ -261,6 +264,7 @@ class JudgeViewProvider implements vscode.WebviewViewProvider {
                         window.remoteMessage = '${remoteMessage}';
                         window.generatedJsonUri = '${generatedJsonUri}';
                         window.remoteServerAddress = '${remoteServerAddress}';
+                        window.showLiveUserCount = ${showLiveUserCount};
 
                         document.addEventListener(
                             'DOMContentLoaded',

src/webview/frontend/App.tsx

@@ -40,6 +40,7 @@ interface CustomWindow extends Window {
     generatedJsonUri: string;
     remoteMessage: string | null;
     remoteServerAddress: string;
+    showLiveUserCount: boolean;
     console: Console;
 }
 declare const window: CustomWindow;
@@ -95,10 +96,13 @@ function Judge(props: {
     const [extLogs, setExtLogs] = useState<string>('');
 
     useEffect(() => {
-        getLiveUserCount().then((count) => setLiveUserCount(count));
-        const interval = setInterval(() => {
-            getLiveUserCount().then((count) => setLiveUserCount(count));
-        }, 30000);
+        const updateLiveUserCount = (): void => {
+            if (window.showLiveUserCount) {
+                getLiveUserCount().then((count) => setLiveUserCount(count));
+            }
+        };
+        updateLiveUserCount();
+        const interval = setInterval(updateLiveUserCount, 30000);
         return () => clearInterval(interval);
     }, []);
 
@@ -554,9 +558,13 @@ function Judge(props: {
                 <h3>License</h3>
                 <pre className="selectable">{generatedJson.licenseString}</pre>
                 <hr />
-                <h3>Live user count</h3>
-                {liveUserCount} user(s) online.
-                <hr />
+                {window.showLiveUserCount && (
+                    <>
+                        <h3>Live user count</h3>
+                        {liveUserCount} {liveUserCount === 1 ? "user" : "users"} online.
+                        <hr />
+                    </>
+                )}
                 <h3>UI Logs</h3>
                 <pre className="selectable">{logs}</pre>
                 <hr />
@@ -643,10 +651,10 @@ function Judge(props: {
                         }}
                     />
                 </div>
-                {liveUserCount > 0 && (
+                {window.showLiveUserCount && liveUserCount > 0 && (
                     <div className="liveUserCount">
                         <i className="codicon codicon-circle-filled color-green"></i>{' '}
-                        {liveUserCount} users online
+                        {liveUserCount} {liveUserCount === 1 ? "user" : "users"} online.
                     </div>
                 )}
             </div>