feat: add a way to toggle offline users list

src/components/navigation/right/MemberList.tsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import { GroupedVirtuoso } from "react-virtuoso";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { User } from "revolt.js/dist/maps/Users";
@@ -48,6 +49,10 @@ const NoOomfie = styled.div`
     font-size: 0.8em;
     text-align: center;
     color: var(--secondary-foreground);
+
+    flex-direction: column;
+    display: flex;
+    gap: 4px;
 `;
 
 const ItemContent = memo(
@@ -128,14 +133,23 @@ export default function MemberList({
                 if (entry.type === "no_offline") {
                     return (
                         <NoOomfie>
-                            Offline users temporarily disabled for this server,
+                            <div>
-                            see issue{" "}
+                                Offline users temporarily disabled for this
-                            <a
+                                server, see issue{" "}
-                                href="https://github.com/revoltchat/delta/issues/128"
+                                <a
-                                target="_blank">
+                                    href="https://github.com/revoltchat/delta/issues/128"
-                                #128
+                                    target="_blank">
-                            </a>{" "}
+                                    #128
-                            for when this will be resolved.
+                                </a>{" "}
+                                for when this will be resolved.
+                            </div>
+                            <div>
+                                You may re-enable them in{" "}
+                                <Link to="/settings/experiments">
+                                    <a>experiments</a>
+                                </Link>
+                                .
+                            </div>
                         </NoOomfie>
                     );
                 }

src/components/navigation/right/MemberSidebar.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { autorun, reaction } from "mobx";
+import { autorun } from "mobx";
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
 import { Role } from "revolt-api/types/Servers";
@@ -10,8 +10,6 @@ import { User } from "revolt.js/dist/maps/Users";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { defer } from "../../../lib/defer";
-
 import {
     ClientStatus,
     StatusContext,
@@ -148,7 +146,7 @@ function useEntries(
         }
 
         // ! FIXME: Temporary performance fix
-        if (SKIP_OFFLINE.has(channel.server_id!)) {
+        if (shouldSkipOffline(channel.server_id!)) {
             entries.push({
                 type: "no_offline",
                 users: [null!],
@@ -194,7 +192,20 @@ export function resetMemberSidebarFetched() {
     FETCHED.clear();
 }
 
-export const SKIP_OFFLINE = new Set(["01F7ZSBSFHQ8TA81725KQCSDDP"]);
+const SKIP_OFFLINE = new Set(["01F7ZSBSFHQ8TA81725KQCSDDP"]);
+
+let SKIP_ENABLED = true;
+export function setOfflineSkipEnabled(value: boolean) {
+    SKIP_ENABLED = value;
+}
+
+function shouldSkipOffline(id: string) {
+    if (SKIP_ENABLED) {
+        return SKIP_OFFLINE.has(id);
+    }
+
+    return false;
+}
 
 export const ServerMemberSidebar = observer(
     ({ channel }: { channel: Channel }) => {
@@ -205,7 +216,7 @@ export const ServerMemberSidebar = observer(
             const server_id = channel.server_id!;
             if (status === ClientStatus.ONLINE && !FETCHED.has(server_id)) {
                 channel
-                    .server!.syncMembers(SKIP_OFFLINE.has(server_id))
+                    .server!.syncMembers(shouldSkipOffline(server_id))
                     .then(() => FETCHED.add(server_id));
             }
             // eslint-disable-next-line

src/mobx/stores/Experiments.ts

@@ -1,23 +1,21 @@
-import {
+import { action, computed, makeAutoObservable, ObservableSet } from "mobx";
-    action,
-    autorun,
-    computed,
-    makeAutoObservable,
-    ObservableSet,
-} from "mobx";
 
+import {
+    setOfflineSkipEnabled,
+    resetMemberSidebarFetched,
+} from "../../components/navigation/right/MemberSidebar";
 import Persistent from "../interfaces/Persistent";
 import Store from "../interfaces/Store";
 
 /**
  * Union type of available experiments.
  */
-export type Experiment = "dummy";
+export type Experiment = "dummy" | "offline_users";
 
 /**
  * Currently active experiments.
  */
-export const AVAILABLE_EXPERIMENTS: Experiment[] = ["dummy"];
+export const AVAILABLE_EXPERIMENTS: Experiment[] = ["dummy", "offline_users"];
 
 /**
  * Definitions for experiments listed by {@link Experiment}.
@@ -29,6 +27,11 @@ export const EXPERIMENTS: {
         title: "Dummy Experiment",
         description: "This is a dummy experiment.",
     },
+    offline_users: {
+        title: "Re-enable offline users in large servers (>10k members)",
+        description:
+            "If you can take the performance hit (for example, you're on desktop), you can re-enable offline users for big servers such as Revolt Lounge.",
+    },
 };
 
 export interface Data {
@@ -62,7 +65,7 @@ export default class Experiments implements Store, Persistent<Data> {
     @action hydrate(data: Data) {
         if (data.enabled) {
             for (const experiment of data.enabled) {
-                this.enabled.add(experiment as Experiment);
+                this.enable(experiment as Experiment);
             }
         }
     }
@@ -80,6 +83,11 @@ export default class Experiments implements Store, Persistent<Data> {
      * @param experiment Experiment
      */
     @action enable(experiment: Experiment) {
+        if (experiment === "offline_users") {
+            setOfflineSkipEnabled(false);
+            resetMemberSidebarFetched();
+        }
+
         this.enabled.add(experiment);
     }
 
@@ -88,6 +96,8 @@ export default class Experiments implements Store, Persistent<Data> {
      * @param experiment Experiment
      */
     @action disable(experiment: Experiment) {
+        if (experiment === "offline_users") setOfflineSkipEnabled(true);
+
         this.enabled.delete(experiment);
     }