diff --git a/backend/src/api/routes/index.ts b/backend/src/api/routes/index.ts
index 61a3ff2f5b98..fe53800a4b9b 100644
--- a/backend/src/api/routes/index.ts
+++ b/backend/src/api/routes/index.ts
@@ -140,7 +140,12 @@ function applyDevApiRoutes(app: Application): void {
     app.use("/configure", expressStatic(join(__dirname, "../../../private")));
 
     app.use(async (req, res, next) => {
-      const slowdown = (await getLiveConfiguration()).dev.responseSlowdownMs;
+      let slowdown = (await getLiveConfiguration()).dev.responseSlowdownMs;
+      if (req.path.includes("connection")) slowdown *= 2.2;
+      if (req.path.includes("presets")) slowdown *= 1.6;
+      if (req.path.includes("config")) slowdown *= 1.2;
+      if (req.path.includes("configuration")) slowdown *= 0.5;
+
       if (slowdown > 0) {
         Logger.info(
           `Simulating ${slowdown}ms delay for ${req.method} ${req.path}`,
diff --git a/frontend/__tests__/components/AsyncContent.spec.tsx b/frontend/__tests__/components/AsyncContent.spec.tsx
index 613dd48d2851..37ff6d0e72ce 100644
--- a/frontend/__tests__/components/AsyncContent.spec.tsx
+++ b/frontend/__tests__/components/AsyncContent.spec.tsx
@@ -2,25 +2,12 @@ import { describe, it, expect } from "vitest";
 import { render, screen, waitFor } from "@solidjs/testing-library";
 import { createResource, Resource } from "solid-js";
 import AsyncContent from "../../src/ts/components/common/AsyncContent";
+import {
+  createLoadingStore,
+  LoadingStore,
+} from "../../src/ts/signals/util/loadingStore";
 
 describe("AsyncContent", () => {
-  function renderWithResource<T>(
-    resource: Resource<T>,
-    errorMessage?: string,
-  ): {
-    container: HTMLElement;
-  } {
-    const { container } = render(() => (
-      <AsyncContent resource={resource} errorMessage={errorMessage}>
-        {(data) => <div data-testid="content">{String(data)}</div>}
-      </AsyncContent>
-    ));
-
-    return {
-      container,
-    };
-  }
-
   it("renders loading state while resource is pending", () => {
     const [resource] = createResource(async () => {
       await new Promise((resolve) => setTimeout(resolve, 100));
@@ -75,4 +62,94 @@ describe("AsyncContent", () => {
       expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
     });
   });
+
+  it("renders loading state while loadingStore is pending", () => {
+    const loadingStore = createLoadingStore(
+      "test",
+      async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        return { data: "data" };
+      },
+      () => ({}),
+    );
+
+    const { container } = renderWithLoadingStore(loadingStore);
+
+    const preloader = container.querySelector(".preloader");
+    expect(preloader).toBeInTheDocument();
+    expect(preloader).toHaveClass("preloader");
+    expect(preloader?.querySelector("i")).toHaveClass(
+      "fas",
+      "fa-fw",
+      "fa-spin",
+      "fa-circle-notch",
+    );
+  });
+
+  it("renders data when loadingStore resolves", async () => {
+    const loadingStore = createLoadingStore<{ data?: string }>(
+      "test",
+      async () => {
+        return { data: "Test Data" };
+      },
+      () => ({}),
+    );
+
+    renderWithLoadingStore(loadingStore);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
+    });
+  });
+
+  it("renders error message when loadingStore fails", async () => {
+    const loadingStore = createLoadingStore(
+      "test",
+      async () => {
+        throw new Error("Test error");
+      },
+      () => ({}),
+    );
+
+    renderWithLoadingStore(loadingStore, "Custom error message");
+
+    await waitFor(() => {
+      expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
+    });
+  });
+
+  function renderWithResource<T>(
+    resource: Resource<T>,
+    errorMessage?: string,
+  ): {
+    container: HTMLElement;
+  } {
+    const { container } = render(() => (
+      <AsyncContent resource={resource} errorMessage={errorMessage}>
+        {(data) => <div data-testid="content">{String(data)}</div>}
+      </AsyncContent>
+    ));
+
+    return {
+      container,
+    };
+  }
+
+  function renderWithLoadingStore(
+    loadingStore: LoadingStore<{ data?: string }>,
+    errorMessage?: string,
+  ): {
+    container: HTMLElement;
+  } {
+    loadingStore.load();
+    const { container } = render(() => (
+      <AsyncContent loadingStore={loadingStore} errorMessage={errorMessage}>
+        {(data) => <div data-testid="content">{data.data}</div>}
+      </AsyncContent>
+    ));
+
+    return {
+      container,
+    };
+  }
 });
diff --git a/frontend/__tests__/signals/util/loadingStore.spec.ts b/frontend/__tests__/signals/util/loadingStore.spec.ts
new file mode 100644
index 000000000000..7040ced8850e
--- /dev/null
+++ b/frontend/__tests__/signals/util/loadingStore.spec.ts
@@ -0,0 +1,134 @@
+import { createLoadingStore } from "../../../src/ts/signals/util/loadingStore";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+const mockFetcher = vi.fn();
+const initialValue = vi.fn(() => ({ data: null }));
+
+describe("createLoadingStore", () => {
+  beforeEach(() => {
+    mockFetcher.mockClear();
+    initialValue.mockClear();
+  });
+
+  it("should initialize with the correct state", () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+
+    expect(store.state().state).toBe("unresolved");
+    expect(store.state().loading).toBe(false);
+    expect(store.state().ready).toBe(false);
+    expect(store.state().refreshing).toBe(false);
+    expect(store.state().error).toBeUndefined();
+    expect(store.store).toEqual({ data: null });
+  });
+
+  it("should transition to loading when load is called", async () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+    store.load();
+
+    expect(store.state().state).toBe("pending");
+    expect(store.state().loading).toBe(true);
+  });
+
+  it("should enable loading if ready is called", async () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+
+    await store.ready();
+  });
+
+  it("should call the fetcher when load is called", async () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    store.load();
+
+    await store.ready();
+
+    expect(mockFetcher).toHaveBeenCalledTimes(1);
+    expect(store.state().state).toBe("ready");
+    expect(store.store).toEqual({ data: "test" });
+  });
+
+  it("should handle error when fetcher fails", async () => {
+    mockFetcher.mockRejectedValueOnce(new Error("Failed to load"));
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+
+    store.load();
+
+    await expect(store.ready()).rejects.toThrow("Failed to load");
+
+    expect(store.state().state).toBe("errored");
+    expect(store.state().error).toEqual(new Error("Failed to load"));
+  });
+
+  it("should transition to refreshing state on refresh", async () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    store.load();
+
+    store.refresh(); // trigger refresh
+    expect(store.state().state).toBe("refreshing");
+    expect(store.state().refreshing).toBe(true);
+  });
+
+  it("should trigger load when refresh is called and shouldLoad is false", async () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    expect(store.state().state).toBe("unresolved");
+
+    store.refresh();
+    expect(store.state().state).toBe("refreshing");
+    expect(store.state().refreshing).toBe(true);
+
+    // Wait for the store to be ready after fetching
+    await store.ready();
+
+    // Ensure the store's state is 'ready' after the refresh
+    expect(store.state().state).toBe("ready");
+    expect(store.store).toEqual({ data: "test" });
+  });
+
+  it("should reset the store to its initial value on reset", async () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    store.load();
+
+    await store.ready();
+
+    expect(store.store).toEqual({ data: "test" });
+
+    store.reset();
+    expect(store.state().state).toBe("unresolved");
+    expect(store.state().loading).toBe(false);
+    expect(store.store).toEqual({ data: null });
+  });
+
+  it("should handle a promise rejection during reset", async () => {
+    const store = createLoadingStore("test", mockFetcher, initialValue);
+
+    // Mock the fetcher to resolve with data
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+
+    // Trigger loading the store
+    store.load();
+
+    // Wait for the store to be ready
+    await store.ready();
+
+    // Ensure the store state after loading
+    expect(store.state().state).toBe("ready");
+    expect(store.store).toEqual({ data: "test" });
+
+    // Now call reset, which should reject the ready promise
+    const readyPromise = store.ready(); // Grab the current ready promise
+
+    store.reset(); // Call reset, which should reject the promise
+
+    // Ensure the promise rejects as expected
+    await expect(readyPromise).rejects.toThrow("Reset");
+
+    // Ensure the state is reset
+    expect(store.state().state).toBe("unresolved");
+    expect(store.state().loading).toBe(false);
+    expect(store.store).toEqual({ data: null });
+  });
+});
diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
index b1d7a856c0f7..7ffd78d2a27a 100644
--- a/frontend/src/html/pages/account.html
+++ b/frontend/src/html/pages/account.html
@@ -1,4 +1,5 @@
 <div class="page pageAccount hidden full-width" id="pageAccount">
+  <AccountPageLoader />
   <div class="content full-width content-grid">
     <div class="profile">
       <div class="details both">
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 75440c591c7a..4cad91d7af92 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -21,6 +21,7 @@
         <div class="bar"></div>
       </div>
     </div>
+    <PreLoader />
     <div id="popups">
       <load src="html/popups.html" />
     </div>
diff --git a/frontend/src/styles/loading.scss b/frontend/src/styles/loading.scss
index fbad0bed09a5..8a61e8aa851f 100644
--- a/frontend/src/styles/loading.scss
+++ b/frontend/src/styles/loading.scss
@@ -38,3 +38,31 @@
     }
   }
 }
+
+#preloader {
+  text-align: center;
+  place-self: center;
+  align-content: center;
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+
+  .text {
+    height: 1.25em;
+  }
+
+  .bar {
+    max-width: 20rem;
+    width: 100%;
+    height: 0.5rem;
+    background: var(--sub-alt-color);
+    border-radius: var(--roundness);
+    justify-self: center;
+    .fill {
+      height: 100%;
+      width: 50%;
+      background: var(--main-color);
+      border-radius: var(--roundness);
+    }
+  }
+}
diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index 75a60cfd99cd..8a4e59d4d952 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -1,31 +1,15 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
-import Ape from ".";
-import { promiseWithResolvers } from "../utils/misc";
+import { serverConfiguration } from "../signals/server-configuration";
 
-let config: Configuration | undefined = undefined;
-
-const {
-  promise: configurationPromise,
-  resolve,
-  reject,
-} = promiseWithResolvers<boolean>();
-
-export { configurationPromise };
+export const configurationPromise = serverConfiguration.ready();
 
 export function get(): Configuration | undefined {
-  return config;
+  return serverConfiguration.state().ready
+    ? serverConfiguration.store
+    : undefined;
 }
 
 export async function sync(): Promise<void> {
-  const response = await Ape.configuration.get();
-
-  if (response.status !== 200) {
-    const message = `Could not fetch configuration: ${response.body.message}`;
-    console.error(message);
-    reject(message);
-    return;
-  } else {
-    config = response.body.data ?? undefined;
-    resolve(true);
-  }
+  serverConfiguration.refresh();
+  return serverConfiguration.ready();
 }
diff --git a/frontend/src/ts/auth.ts b/frontend/src/ts/auth.ts
index da87b66a29ee..7ca3ecf34e69 100644
--- a/frontend/src/ts/auth.ts
+++ b/frontend/src/ts/auth.ts
@@ -31,6 +31,7 @@ import * as Sentry from "./sentry";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import * as AuthEvent from "./observables/auth-event";
 import { qs, qsa } from "./utils/dom";
+import { preloaderDonePromise } from "./components/common/PreLoader";
 
 export const gmailProvider = new GoogleAuthProvider();
 export const githubProvider = new GithubAuthProvider();
@@ -58,10 +59,11 @@ async function sendVerificationEmail(): Promise<void> {
 
 async function getDataAndInit(): Promise<boolean> {
   try {
-    console.log("getting account data");
-    const snapshot = await DB.initSnapshot();
+    await preloaderDonePromise;
+    const snapshot = DB.getSnapshot();
+    console.log("got snapshot", snapshot);
 
-    if (snapshot === false) {
+    if (snapshot === undefined) {
       throw new Error(
         "Snapshot didn't initialize due to lacking authentication even though user is authenticated",
       );
@@ -156,14 +158,6 @@ export async function onAuthStateChanged(
     void Sentry.clearUser();
   }
 
-  let keyframes = [
-    {
-      percentage: 90,
-      durationMs: 1000,
-      text: "Downloading user data...",
-    },
-  ];
-
   //undefined means navigate to whatever the current window.location.pathname is
   await navigate(undefined, {
     force: true,
@@ -178,8 +172,7 @@ export async function onAuthStateChanged(
       loadingPromise: async () => {
         await userPromise;
       },
-      style: "bar",
-      keyframes: keyframes,
+      style: "spinner", //TODO none?!
     },
   });
 
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index cf2d57bb1500..2ed23dad79e4 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -1,27 +1,48 @@
-import { ErrorBoundary, JSXElement, Resource, Show, Suspense } from "solid-js";
+import { ErrorBoundary, JSXElement, Resource, Show } from "solid-js";
 import { createErrorMessage } from "../../utils/misc";
 import * as Notifications from "../../elements/notifications";
 import { Conditional } from "./Conditional";
+import { LoadingStore } from "../../signals/util/loadingStore";
 
 export default function AsyncContent<T>(
   props: {
-    resource: Resource<T | undefined>;
     errorMessage?: string;
   } & (
     | {
-        alwaysShowContent?: never;
-        children: (data: T) => JSXElement;
+        resource: Resource<T | undefined>;
+        loadingStore?: never;
       }
     | {
-        alwaysShowContent: true;
-        showLoader?: true;
-        children: (data: T | undefined) => JSXElement;
+        loadingStore: LoadingStore<T | undefined>;
+        resource?: never;
       }
-  ),
+  ) &
+    (
+      | {
+          alwaysShowContent?: never;
+          children: (data: T) => JSXElement;
+        }
+      | {
+          alwaysShowContent: true;
+          showLoader?: true;
+          children: (data: T | undefined) => JSXElement;
+        }
+    ),
 ): JSXElement {
+  const source =
+    props.resource !== undefined
+      ? {
+          value: () => props.resource(),
+          loading: () => props.resource.loading,
+        }
+      : {
+          value: () => props.loadingStore.store,
+          loading: () => props.loadingStore.state().loading,
+        };
+
   const value = () => {
     try {
-      return props.resource();
+      return source.value();
     } catch (err) {
       const message = createErrorMessage(
         err,
@@ -33,10 +54,20 @@ export default function AsyncContent<T>(
     }
   };
   const handleError = (err: unknown): string => {
-    console.error(err);
+    console.error("AsyncContext failed", err);
     return createErrorMessage(err, props.errorMessage ?? "An error occurred");
   };
 
+  const loader: JSXElement = (
+    <div class="preloader">
+      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+    </div>
+  );
+
+  const errorText = (err: unknown): JSXElement => (
+    <div class="error">{handleError(err)}</div>
+  );
+
   return (
     <Conditional
       if={props.alwaysShowContent === true}
@@ -47,32 +78,28 @@ export default function AsyncContent<T>(
         };
         return (
           <>
-            <Show when={p.showLoader && props.resource.loading}>
-              <div class="preloader">
-                <i class="fas fa-fw fa-spin fa-circle-notch"></i>
-              </div>
-            </Show>
+            <Show when={p.showLoader && source.loading()}>{loader}</Show>
             {p.children(value())}
           </>
         );
       })()}
       else={
-        <ErrorBoundary
-          fallback={(err) => <div class="error">{handleError(err)}</div>}
-        >
-          <Suspense
-            fallback={
-              <div class="preloader">
-                <i class="fas fa-fw fa-spin fa-circle-notch"></i>
-              </div>
+        <ErrorBoundary fallback={errorText}>
+          <Show when={props.loadingStore?.state().error !== undefined}>
+            {errorText}
+          </Show>
+
+          <Conditional
+            if={source.loading()}
+            then={loader}
+            else={
+              <Show
+                when={source.value() !== null && source.value() !== undefined}
+              >
+                {props.children(source.value() as T)}
+              </Show>
             }
-          >
-            <Show
-              when={props.resource() !== null && props.resource() !== undefined}
-            >
-              {props.children(props.resource() as T)}
-            </Show>
-          </Suspense>
+          />
         </ErrorBoundary>
       }
     />
diff --git a/frontend/src/ts/components/common/BlockingLoader.tsx b/frontend/src/ts/components/common/BlockingLoader.tsx
new file mode 100644
index 000000000000..d3c433cba9d0
--- /dev/null
+++ b/frontend/src/ts/components/common/BlockingLoader.tsx
@@ -0,0 +1,20 @@
+import { JSXElement } from "solid-js";
+
+import { Portal } from "solid-js/web";
+import { Keyframe } from "./Loader";
+
+export function BlockingLoader(props: { keyframe?: Keyframe }): JSXElement {
+  return (
+    <Portal mount={document.querySelector("main") as HTMLElement}>
+      <div id="preloader">
+        <div class="bar">
+          <div
+            class="fill"
+            style={{ width: props.keyframe?.percentage + "%" }}
+          />
+        </div>
+        <div class="text">{props.keyframe?.text ?? "Loading..."}</div>
+      </div>
+    </Portal>
+  );
+}
diff --git a/frontend/src/ts/components/common/Loader.tsx b/frontend/src/ts/components/common/Loader.tsx
new file mode 100644
index 000000000000..0d8542149d4d
--- /dev/null
+++ b/frontend/src/ts/components/common/Loader.tsx
@@ -0,0 +1,127 @@
+import { Accessor, createEffect, createMemo, JSXElement, Show } from "solid-js";
+import { LoadError, LoadingStore } from "../../signals/util/loadingStore";
+import { Store } from "solid-js/store";
+
+export type Keyframe = {
+  /**
+   * Percentage of the loading bar to fill.
+   */
+  percentage: number;
+  /**
+   * Text to display below the loading bar.
+   */
+  text?: string;
+};
+type LoadingStoreAndKeyframe = {
+  store: LoadingStore<unknown>;
+  keyframe?: Keyframe;
+};
+type LoadShape = Record<string, LoadingStoreAndKeyframe>;
+type ChildData<L extends LoadShape> = {
+  [K in keyof L]: L[K]["store"] extends LoadingStore<infer D>
+    ? Store<D>
+    : never;
+};
+
+type LoaderProps<L extends LoadShape> = {
+  active: true | Accessor<boolean>;
+  load: Accessor<L>;
+  loader?: (keyframe?: Keyframe) => JSXElement;
+  error?: (error: LoadError) => JSXElement;
+  onComplete?: (data: ChildData<L>) => void;
+  children?: (data: ChildData<L>) => JSXElement;
+};
+
+export default function Loader<L extends LoadShape>(
+  props: LoaderProps<L>,
+): JSXElement {
+  const loaders = createMemo<LoadingStoreAndKeyframe[]>(() =>
+    Object.values(props.load()),
+  );
+
+  createEffect(() => {
+    const active = props.active === true ? true : props.active();
+
+    if (!active) return;
+
+    console.debug("Loader: load missing stores");
+
+    for (const { store } of loaders()) {
+      const state = store.state();
+      if (!state.loading && !state.ready && !state.error) {
+        store.load();
+      }
+    }
+  });
+
+  const stores = createMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(props.load()).map(([key, value]) => [
+          key,
+          value.store.store,
+        ]),
+      ) as {
+        [K in keyof L]: L[K]["store"] extends LoadingStore<infer D>
+          ? Store<D>
+          : never;
+      },
+  );
+
+  let completed = false;
+  const allReady = createMemo(() =>
+    loaders().every((it) => it.store.state().ready),
+  );
+  createEffect(() => {
+    loaders();
+    completed = false;
+  });
+
+  createEffect(() => {
+    if (!completed && allReady()) {
+      completed = true;
+      props.onComplete?.(stores());
+    }
+  });
+
+  const firstLoadingKeyframe = createMemo<Keyframe | undefined>(() => {
+    let min: Keyframe | undefined;
+
+    for (const { store, keyframe } of loaders()) {
+      if (!keyframe || !store.state().loading) continue;
+      if (!min || keyframe.percentage < min.percentage) {
+        min = keyframe;
+      }
+    }
+
+    return min;
+  });
+
+  const hasError = createMemo<LoadError | undefined>(
+    () =>
+      loaders()
+        .map((it) => it.store.state())
+        .find((it) => it.error !== undefined)?.error,
+  );
+
+  return (
+    <Show
+      when={firstLoadingKeyframe() === undefined}
+      fallback={props.loader?.(firstLoadingKeyframe()) ?? undefined}
+    >
+      <Show
+        when={hasError() === undefined}
+        fallback={
+          props.error !== undefined ? (
+            // oxlint-disable-next-line typescript/no-non-null-assertion
+            props.error(hasError()!)
+          ) : (
+            <p>Loading failed: {hasError()?.message}</p>
+          )
+        }
+      >
+        {props.children?.(stores())}
+      </Show>
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/common/PreLoader.tsx b/frontend/src/ts/components/common/PreLoader.tsx
new file mode 100644
index 000000000000..c48ef332b9e0
--- /dev/null
+++ b/frontend/src/ts/components/common/PreLoader.tsx
@@ -0,0 +1,178 @@
+import { createEffect, createMemo, JSXElement } from "solid-js";
+import { createLoadingStore } from "../../signals/util/loadingStore";
+import { PartialConfig } from "@monkeytype/schemas/configs";
+import Ape from "../../ape";
+import { isAuthenticated } from "../../signals/user";
+import { Preset } from "@monkeytype/schemas/presets";
+import Loader from "./Loader";
+import { serverConfiguration } from "../../signals/server-configuration";
+import {
+  connections,
+  friends,
+  pendingConnections,
+} from "../../signals/connections";
+import { GetUserResponse } from "@monkeytype/contracts/users";
+import { initSnapshot } from "../../db";
+import { Connection } from "@monkeytype/schemas/connections";
+import { promiseWithResolvers } from "../../utils/misc";
+import { BlockingLoader } from "./BlockingLoader";
+import { unwrap } from "solid-js/store";
+import { getActivePage } from "../../signals/core";
+import { ResultMinified } from "@monkeytype/schemas/results";
+
+const { promise: preloaderDonePromise, resolve: loadDone } =
+  promiseWithResolvers();
+
+export { preloaderDonePromise };
+
+export function PreLoader(): JSXElement {
+  const user = createLoadingStore<GetUserResponse["data"]>(
+    "user",
+    async () => {
+      const response = await Ape.users.get();
+
+      if (response.status !== 200) {
+        throw new Error(response.body.message);
+      }
+      return response.body.data;
+    },
+
+    () => ({}) as GetUserResponse["data"],
+  );
+  const partialConfig = createLoadingStore<PartialConfig>(
+    "userConfig",
+    async () => {
+      const response = await Ape.configs.get();
+
+      if (response.status !== 200) {
+        throw new Error(response.body.message);
+      }
+      return response.body.data as PartialConfig;
+    },
+
+    () => ({}) as PartialConfig,
+  );
+  const presets = createLoadingStore<Preset[]>(
+    "presets",
+    async () => {
+      const response = await Ape.presets.get();
+
+      if (response.status !== 200) {
+        throw new Error(response.body.message);
+      }
+      return response.body.data;
+    },
+
+    () => [],
+  );
+
+  const results = createLoadingStore<ResultMinified[]>(
+    "results",
+    async () => {
+      const response = await Ape.results.get();
+      if (response.status !== 200) {
+        throw new Error(response.body.message);
+      }
+      return response.body.data;
+    },
+    () => [],
+  );
+
+  createEffect(() => {
+    if (!isAuthenticated()) return;
+
+    console.debug("PreLoader: cleaning user data.");
+    [partialConfig, user, presets, results].forEach((it) => it.reset());
+  });
+
+  const load = createMemo(() => {
+    const page = getActivePage();
+    const stores = {
+      userData: {
+        store: user,
+        keyframe: {
+          percentage: 0,
+          text: "Downloading user data...",
+        },
+      },
+      configData: {
+        store: partialConfig,
+        keyframe: {
+          percentage: 0,
+          text: "Downloading user config...",
+        },
+      },
+      presetsData: {
+        store: presets,
+        keyframe: {
+          percentage: 0,
+          text: "Downloading user presets...",
+        },
+      },
+      connectionsData: {
+        store: connections,
+        keyframe: {
+          percentage: 0,
+          text: "Downloading connections...",
+        },
+      },
+      ...(page === "friends" && {
+        friends: {
+          store: friends,
+          keyframe: { percentage: 0, text: "Downloading friends..." },
+        },
+        pendingConnections: {
+          store: pendingConnections,
+          keyframe: {
+            percentage: 0,
+
+            text: "Downloading friend requests...",
+          },
+        },
+      }),
+      ...(page === "account" && {
+        results: {
+          store: results,
+          keyframe: {
+            percentage: 90,
+            text: "Downloading results...",
+          },
+        },
+      }),
+    };
+    const inc = Math.ceil(100 / Object.keys(stores).length);
+    let percentage = inc;
+    for (const store of Object.values(stores)) {
+      store.keyframe["percentage"] = percentage;
+      percentage += inc;
+    }
+
+    console.log("##### update load", stores);
+    return stores;
+  });
+
+  return (
+    <Loader
+      active={() => isAuthenticated() && serverConfiguration.state().ready}
+      loader={(kf) => <BlockingLoader keyframe={kf} />}
+      onComplete={isLoaded}
+      load={() => load()}
+    />
+  );
+}
+
+function isLoaded(stores: {
+  userData: GetUserResponse["data"];
+  configData: PartialConfig;
+  presetsData: Preset[];
+  connectionsData: Connection[];
+}): void {
+  console.log("preloader done loading", stores.userData.name);
+  void initSnapshot({
+    userData: unwrap(stores.userData),
+    configData: unwrap(stores.configData),
+    presetsData: unwrap(stores.presetsData),
+    connectionsData: unwrap(stores.connectionsData),
+  });
+  loadDone();
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 83adca3ef98a..6e0009e9d4f2 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -5,11 +5,13 @@ import { JSXElement } from "solid-js";
 import { Footer } from "./layout/footer/Footer";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
+import { PreLoader } from "./common/PreLoader";
 
 const components: Record<string, () => JSXElement> = {
   Footer: () => <Footer />,
   Modals: () => <Modals />,
   AboutPage: () => <AboutPage />,
+  PreLoader: () => <PreLoader />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index ec73dd894481..966f9c693e20 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createResource, For, JSXElement, Show } from "solid-js";
+import { createResource, For, JSXElement, Show } from "solid-js";
 import "./AboutPage.scss";
 import { Button } from "../common/Button";
 import { showModal } from "../../stores/modals";
@@ -10,7 +10,8 @@ import Ape from "../../ape";
 import { intervalToDuration } from "date-fns";
 import { getNumberWithMagnitude, numberWithSpaces } from "../../utils/numbers";
 import { ChartJs } from "../common/ChartJs";
-import { getThemeColors } from "../../signals/theme";
+import { connections } from "../../signals/connections";
+import { isAuthenticated } from "../../signals/user";
 
 export function AboutPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "about";
@@ -29,12 +30,30 @@ export function AboutPage(): JSXElement {
     open ? await fetchSpeedHistogram() : undefined,
   );
 
-  createEffect(() => {
-    console.log(getThemeColors());
-  });
-
   return (
     <Show when={isOpen}>
+      <h2>Connections {connections.store.length}</h2>
+
+      <Show when={isAuthenticated()}>
+        <Button onClick={() => connections.load()} text="load" />
+        <Button onClick={() => connections.refresh()} text="refresh" />
+        <Button onClick={() => connections.reset()} text="reset" />
+      </Show>
+
+      <AsyncContent
+        loadingStore={connections}
+        errorMessage="Failed to load connections"
+      >
+        {(data) => (
+          <For each={data}>
+            {(con) => (
+              <p>
+                {con.initiatorName} to {con.receiverName}
+              </p>
+            )}
+          </For>
+        )}
+      </AsyncContent>
       <div class="created">
         Created with love by Miodec.
         <br />
diff --git a/frontend/src/ts/components/pages/AccountPageLoader.tsx b/frontend/src/ts/components/pages/AccountPageLoader.tsx
new file mode 100644
index 000000000000..c687bdcc495d
--- /dev/null
+++ b/frontend/src/ts/components/pages/AccountPageLoader.tsx
@@ -0,0 +1,59 @@
+// temporal component, to be removed when page is converted to solid
+
+import { createEffect, JSXElement } from "solid-js";
+import { promiseWithResolvers } from "../../utils/misc";
+import { createLoadingStore } from "../../signals/util/loadingStore";
+import { ResultMinified } from "@monkeytype/schemas/results";
+import Ape from "../../ape";
+import { isAuthenticated } from "../../signals/user";
+import Loader from "../common/Loader";
+import { BlockingLoader } from "../common/BlockingLoader";
+import { getUserResults } from "../../db";
+import { getActivePage } from "../../signals/core";
+import { unwrap } from "solid-js/store";
+
+const { promise: acountPageDonePromise, resolve: loadDone } =
+  promiseWithResolvers();
+
+export { acountPageDonePromise };
+
+export function AccountPageLoader(): JSXElement {
+  const results = createLoadingStore<ResultMinified[]>(
+    "results",
+    async () => {
+      const response = await Ape.results.get();
+      if (response.status !== 200) {
+        throw new Error(response.body.message);
+      }
+      return response.body.data;
+    },
+    () => [],
+  );
+
+  createEffect(() => {
+    if (!isAuthenticated()) return;
+    console.debug("AccountPageLoader: cleaning user data.");
+    results.reset();
+  });
+
+  return (
+    <Loader
+      active={() => isAuthenticated() && getActivePage() === "account"}
+      load={() => ({
+        results: {
+          store: results,
+          keyframe: {
+            percentage: 90,
+            text: "Downloading results...",
+          },
+        },
+      })}
+      loader={(kf) => <BlockingLoader keyframe={kf} />}
+      onComplete={isLoaded}
+    />
+  );
+}
+
+function isLoaded(stores: { results: ResultMinified[] }): void {
+  void getUserResults(undefined, unwrap(stores.results)).then(() => loadDone());
+}
diff --git a/frontend/src/ts/components/pages/FriendsPageLoader.tsx b/frontend/src/ts/components/pages/FriendsPageLoader.tsx
new file mode 100644
index 000000000000..ed724ed3c828
--- /dev/null
+++ b/frontend/src/ts/components/pages/FriendsPageLoader.tsx
@@ -0,0 +1,41 @@
+// temporal component, to be removed when page is converted to solid
+
+import { JSXElement } from "solid-js";
+import { promiseWithResolvers } from "../../utils/misc";
+
+import { isAuthenticated } from "../../signals/user";
+import Loader from "../common/Loader";
+import { BlockingLoader } from "../common/BlockingLoader";
+
+import { getActivePage } from "../../signals/core";
+
+import { friends, pendingConnections } from "../../signals/connections";
+
+const { promise: friendPageDonePromise, resolve: loadDone } =
+  promiseWithResolvers();
+
+export { friendPageDonePromise };
+
+export function FriendsPageLoader(): JSXElement {
+  return (
+    <Loader
+      active={() => isAuthenticated() && getActivePage() === "friends"}
+      load={() => ({
+        friends: {
+          store: friends,
+          keyframe: { percentage: 50, text: "Downloading friends..." },
+        },
+        pendingConnections: {
+          store: pendingConnections,
+          keyframe: {
+            percentage: 90,
+
+            text: "Downloading friend requests...",
+          },
+        },
+      })}
+      loader={(kf) => <BlockingLoader keyframe={kf} />}
+      onComplete={() => loadDone()}
+    />
+  );
+}
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index f71418abdb90..28f89345e4f0 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -12,7 +12,7 @@ import {
 import * as Loader from "./elements/loader";
 
 import { Badge, CustomTheme } from "@monkeytype/schemas/users";
-import { Config, Difficulty } from "@monkeytype/schemas/configs";
+import { Config, Difficulty, PartialConfig } from "@monkeytype/schemas/configs";
 import {
   Mode,
   Mode2,
@@ -31,11 +31,14 @@ import { FunboxMetadata } from "../../../packages/funbox/src/types";
 import { getFirstDayOfTheWeek } from "./utils/date-and-time";
 import { Language } from "@monkeytype/schemas/languages";
 import * as AuthEvent from "./observables/auth-event";
-import {
-  configurationPromise,
-  get as getServerConfiguration,
-} from "./ape/server-configuration";
+import { configurationPromise } from "./ape/server-configuration";
 import { Connection } from "@monkeytype/schemas/connections";
+import { Preset } from "@monkeytype/schemas/presets";
+import { GetUserResponse } from "@monkeytype/contracts/users";
+import { ResultMinified } from "@monkeytype/schemas/results";
+import { createEffect } from "solid-js";
+import { pendingConnections } from "./signals/connections";
+import { unwrap } from "solid-js/store";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
@@ -87,7 +90,16 @@ export function setSnapshot(
   }
 }
 
-export async function initSnapshot(): Promise<Snapshot | false> {
+export async function initSnapshot(preload: {
+  userData: GetUserResponse["data"];
+  presetsData: Preset[];
+  configData: PartialConfig | null;
+  connectionsData: Connection[];
+}): Promise<Snapshot | false> {
+  if (dbSnapshot !== undefined) {
+    console.log("DB: return cached snapshot");
+    return dbSnapshot;
+  }
   //send api request with token that returns tags, presets, and data needed for snap
   const snap = getDefaultSnapshot();
   await configurationPromise;
@@ -95,47 +107,10 @@ export async function initSnapshot(): Promise<Snapshot | false> {
   try {
     if (!isAuthenticated()) return false;
 
-    const connectionsRequest = getServerConfiguration()?.connections.enabled
-      ? Ape.connections.get()
-      : { status: 200, body: { message: "", data: [] } };
-
-    const [userResponse, configResponse, presetsResponse, connectionsResponse] =
-      await Promise.all([
-        Ape.users.get(),
-        Ape.configs.get(),
-        Ape.presets.get(),
-        connectionsRequest,
-      ]);
-
-    if (userResponse.status !== 200) {
-      throw new SnapshotInitError(
-        `${userResponse.body.message} (user)`,
-        userResponse.status,
-      );
-    }
-    if (configResponse.status !== 200) {
-      throw new SnapshotInitError(
-        `${configResponse.body.message} (config)`,
-        configResponse.status,
-      );
-    }
-    if (presetsResponse.status !== 200) {
-      throw new SnapshotInitError(
-        `${presetsResponse.body.message} (presets)`,
-        presetsResponse.status,
-      );
-    }
-    if (connectionsResponse.status !== 200) {
-      throw new SnapshotInitError(
-        `${connectionsResponse.body.message} (connections)`,
-        connectionsResponse.status,
-      );
-    }
-
-    const userData = userResponse.body.data;
-    const configData = configResponse.body.data;
-    const presetsData = presetsResponse.body.data;
-    const connectionsData = connectionsResponse.body.data;
+    const userData = preload.userData;
+    const presetsData = preload.presetsData;
+    const configData = preload.configData;
+    const connectionsData = preload.connectionsData;
 
     if (userData === null) {
       throw new SnapshotInitError(
@@ -281,7 +256,10 @@ export async function initSnapshot(): Promise<Snapshot | false> {
   }
 }
 
-export async function getUserResults(offset?: number): Promise<boolean> {
+export async function getUserResults(
+  offset?: number,
+  resultsData?: ResultMinified[],
+): Promise<boolean> {
   if (!isAuthenticated()) return false;
 
   if (!dbSnapshot) return false;
@@ -296,17 +274,20 @@ export async function getUserResults(offset?: number): Promise<boolean> {
     return false;
   }
 
-  const response = await Ape.results.get({ query: { offset } });
+  if (resultsData === undefined) {
+    const response = await Ape.results.get({ query: { offset } });
 
-  if (response.status !== 200) {
-    Notifications.add("Error getting results", -1, { response });
-    return false;
+    if (response.status !== 200) {
+      Notifications.add("Error getting results", -1, { response });
+      return false;
+    }
+    resultsData = response.body.data;
   }
 
   //another check in case user logs out while waiting for response
   if (!isAuthenticated()) return false;
 
-  const results: SnapshotResult<Mode>[] = response.body.data.map((result) => {
+  const results: SnapshotResult<Mode>[] = resultsData.map((result) => {
     result.bailedOut ??= false;
     result.blindMode ??= false;
     result.lazyMode ??= false;
@@ -1141,6 +1122,7 @@ export async function getTestActivityCalendar(
 }
 
 export function mergeConnections(connections: Connection[]): void {
+  console.log("##### merge connections", connections);
   const snapshot = getSnapshot();
   if (!snapshot) return;
 
@@ -1182,6 +1164,9 @@ export function isFriend(uid: string | undefined): boolean {
   );
 }
 
+createEffect(() => {
+  mergeConnections(unwrap(pendingConnections.store));
+});
 // export async function DB.getLocalTagPB(tagId) {
 //   function cont() {
 //     let ret = 0;
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index dd2a6354201b..e043ce667cc1 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -35,6 +35,7 @@ import {
 } from "firebase/analytics";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { dispatch as dispatchSignUpEvent } from "./observables/google-sign-up-event";
+import { setAuthenticated } from "./signals/user";
 
 let app: FirebaseApp | undefined;
 let Auth: AuthType | undefined;
@@ -74,6 +75,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
     await setPersistence(rememberMe, false);
 
     onAuthStateChanged(Auth, async (user) => {
+      setAuthenticated(user !== undefined && user !== null);
       if (!ignoreAuthCallback) {
         await callback(true, user);
       }
@@ -82,6 +84,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
     app = undefined;
     Auth = undefined;
     console.error("Firebase failed to initialize", e);
+    setAuthenticated(false);
     await callback(false, null);
     if (isDevEnvironment()) {
       Notifications.addPSA(
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 8161475bcc3d..88868a745723 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -45,6 +45,13 @@ import { applyEngineSettings } from "./anim";
 import { qs, qsa, qsr } from "./utils/dom";
 import { mountComponents } from "./components/mount";
 import "./ready";
+import * as ConnectionSignals from "./signals/connections";
+console.log(
+  "######",
+  ConnectionSignals.connections,
+  ConnectionSignals.friends,
+  ConnectionSignals.pendingConnections,
+);
 
 // Lock Math.random
 Object.defineProperty(Math, "random", {
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 9e6c9d9d580a..19310859d883 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -35,6 +35,7 @@ import Ape from "../ape";
 import { AccountChart } from "@monkeytype/schemas/configs";
 import { SortedTableWithLimit } from "../utils/sorted-table";
 import { qs, qsa, qsr, ElementWithUtils, onDOMReady } from "../utils/dom";
+import { acountPageDonePromise } from "../components/pages/AccountPageLoader";
 
 let filterDebug = false;
 //toggle filterdebug
@@ -993,6 +994,7 @@ export async function downloadResults(offset?: number): Promise<void> {
 }
 
 async function update(): Promise<void> {
+  await acountPageDonePromise;
   await downloadResults();
   try {
     await Misc.sleep(0);
@@ -1213,31 +1215,6 @@ export const page = new Page<undefined>({
   id: "account",
   element: qsr(".page.pageAccount"),
   path: "/account",
-  loadingOptions: {
-    loadingMode: () => {
-      if (DB.getSnapshot()?.results === undefined) {
-        return "sync";
-      } else {
-        return "none";
-      }
-    },
-    loadingPromise: async () => {
-      if (DB.getSnapshot() === null) {
-        throw new Error(
-          "Looks like your account data didn't download correctly. Please refresh the page.<br>If this error persists, please contact support.",
-        );
-      }
-      return downloadResults();
-    },
-    style: "bar",
-    keyframes: [
-      {
-        percentage: 90,
-        durationMs: 2000,
-        text: "Downloading results...",
-      },
-    ],
-  },
   afterHide: async (): Promise<void> => {
     reset();
     Skeleton.remove("pageAccount");
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 48a8eee47090..aff00c680762 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -141,6 +141,7 @@ const removeFriendModal = new SimpleModal({
 });
 
 async function fetchPendingConnections(): Promise<void> {
+  return;
   const result = await Ape.connections.get({
     query: { status: "pending", type: "incoming" },
   });
@@ -198,6 +199,7 @@ function updatePendingConnections(): void {
 }
 
 async function fetchFriends(): Promise<void> {
+  return;
   const result = await Ape.users.getFriends();
   if (result.status !== 200) {
     Notifications.add("Error getting friends: " + result.body.message, -1);
@@ -513,7 +515,7 @@ export const page = new Page<undefined>({
   display: "Friends",
   element: qsr(".page.pageFriends"),
   path: "/friends",
-  loadingOptions: {
+  /*loadingOptions: {
     loadingMode: () => {
       if (!getAuthenticatedUser()) {
         return "none";
@@ -554,6 +556,7 @@ export const page = new Page<undefined>({
       },
     ],
   },
+  */
 
   afterHide: async (): Promise<void> => {
     Skeleton.remove("pageFriends");
diff --git a/frontend/src/ts/pages/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts
index 182e819c1ad6..9988e375faee 100644
--- a/frontend/src/ts/pages/leaderboards.ts
+++ b/frontend/src/ts/pages/leaderboards.ts
@@ -1485,14 +1485,6 @@ export const page = new PageWithUrlParams({
   element: qsr(".page.pageLeaderboards"),
   path: "/leaderboards",
   urlParamsSchema: UrlParameterSchema,
-  loadingOptions: {
-    style: "spinner",
-    loadingMode: () => "sync",
-    loadingPromise: async () => {
-      await ServerConfiguration.configurationPromise;
-    },
-  },
-
   afterHide: async (): Promise<void> => {
     Skeleton.remove("pageLeaderboards");
     stopTimer();
diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts
index aa23f89e43b6..e3f75c0eac08 100644
--- a/frontend/src/ts/pages/page.ts
+++ b/frontend/src/ts/pages/page.ts
@@ -24,6 +24,20 @@ type Options<T> = {
   data?: T;
 };
 
+export type Keyframe = {
+  /**
+   * Percentage of the loading bar to fill.
+   */
+  percentage: number;
+  /**
+   * Duration in milliseconds for the keyframe animation.
+   */
+  durationMs: number;
+  /**
+   * Text to display below the loading bar.
+   */
+  text?: string;
+};
 export type LoadingOptions = {
   /**
    * Get the loading mode for this page.
@@ -50,20 +64,7 @@ export type LoadingOptions = {
        * Each keyframe will be shown in order, with the specified percentage and duration.
        * If not provided, a loading spinner will be shown instead.
        */
-      keyframes: {
-        /**
-         * Percentage of the loading bar to fill.
-         */
-        percentage: number;
-        /**
-         * Duration in milliseconds for the keyframe animation.
-         */
-        durationMs: number;
-        /**
-         * Text to display below the loading bar.
-         */
-        text?: string;
-      }[];
+      keyframes: Keyframe[];
     }
 );
 
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 7c5fe24ac154..76492b159c27 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -5,7 +5,7 @@ import * as ConnectionState from "./states/connection";
 import * as AccountButton from "./elements/account-button";
 //@ts-expect-error no types for this package
 import Konami from "konami";
-import * as ServerConfiguration from "./ape/server-configuration";
+import { serverConfiguration as ServerConfiguration } from "./signals/server-configuration";
 import { getActiveFunboxesWithFunction } from "./test/funbox/list";
 import { configLoadPromise } from "./config";
 import { authPromise } from "./firebase";
@@ -34,14 +34,14 @@ onDOMReady(async () => {
     duration: Misc.applyReducedMotion(250),
   });
   if (ConnectionState.get()) {
-    void ServerConfiguration.sync().then(() => {
-      if (!ServerConfiguration.get()?.users.signUp) {
+    void ServerConfiguration.ready().then(() => {
+      if (!ServerConfiguration.store.users.signUp) {
         AccountButton.hide();
         qs(".register")?.addClass("hidden");
         qs(".login")?.addClass("hidden");
         qs(".disabledNotification")?.removeClass("hidden");
       }
-      if (!ServerConfiguration.get()?.connections.enabled) {
+      if (!ServerConfiguration.store.connections.enabled) {
         qs(".accountButtonAndMenu .goToFriends")?.addClass("hidden");
       }
     });
diff --git a/frontend/src/ts/signals/connections.ts b/frontend/src/ts/signals/connections.ts
new file mode 100644
index 000000000000..af650dfbb3ac
--- /dev/null
+++ b/frontend/src/ts/signals/connections.ts
@@ -0,0 +1,59 @@
+import { Connection } from "@monkeytype/schemas/connections";
+import { createLoadingStore } from "./util/loadingStore";
+import Ape from "../ape/";
+import { createEffect } from "solid-js";
+import { isAuthenticated } from "./user";
+import { serverConfiguration } from "./server-configuration";
+import { Friend } from "@monkeytype/schemas/users";
+
+export const connections = createLoadingStore<Connection[]>(
+  "connections",
+  async () => {
+    if (!serverConfiguration.store.connections.enabled) return [];
+    const response = await Ape.connections.get();
+
+    if (response.status !== 200) {
+      throw new Error(response.body.message);
+    }
+    return response.body.data;
+  },
+  () => [],
+);
+
+export const friends = createLoadingStore<Friend[]>(
+  "friends",
+  async () => {
+    const response = await Ape.users.getFriends();
+    if (response.status !== 200) {
+      throw new Error(response.body.message);
+    }
+    return response.body.data;
+  },
+  () => [],
+);
+
+export const pendingConnections = createLoadingStore<Connection[]>(
+  "pendingConnections",
+  async () => {
+    const response = await Ape.connections.get({
+      query: { status: "pending", type: "incoming" },
+    });
+    if (response.status !== 200) {
+      throw new Error(response.body.message);
+    }
+    return response.body.data;
+  },
+  () => [],
+);
+
+createEffect(() => {
+  const authenticated = isAuthenticated();
+  console.debug("Connections: clear user data");
+  //TODO check logout during refresh
+  if (!authenticated) {
+    [connections, friends, pendingConnections].forEach((it) => it.reset());
+  }
+});
+
+//from legacy code
+//await connections.ready;
diff --git a/frontend/src/ts/signals/server-configuration.ts b/frontend/src/ts/signals/server-configuration.ts
new file mode 100644
index 000000000000..ca08102b3361
--- /dev/null
+++ b/frontend/src/ts/signals/server-configuration.ts
@@ -0,0 +1,16 @@
+import { Configuration } from "@monkeytype/schemas/configuration";
+import { createLoadingStore } from "./util/loadingStore";
+import Ape from "../ape";
+
+export const serverConfiguration = createLoadingStore<Configuration>(
+  "serverConfig",
+  async () => {
+    const response = await Ape.configuration.get();
+
+    if (response.status !== 200) {
+      throw new Error(response.body.message);
+    }
+    return response.body.data;
+  },
+  () => ({}) as Configuration,
+);
diff --git a/frontend/src/ts/signals/user.ts b/frontend/src/ts/signals/user.ts
new file mode 100644
index 000000000000..0f24388d36c3
--- /dev/null
+++ b/frontend/src/ts/signals/user.ts
@@ -0,0 +1,3 @@
+import { createSignal } from "solid-js";
+
+export const [isAuthenticated, setAuthenticated] = createSignal(false);
diff --git a/frontend/src/ts/signals/util/loadingStore.ts b/frontend/src/ts/signals/util/loadingStore.ts
new file mode 100644
index 000000000000..6447c7e388aa
--- /dev/null
+++ b/frontend/src/ts/signals/util/loadingStore.ts
@@ -0,0 +1,148 @@
+import { createSignal, createResource, createEffect } from "solid-js";
+import { createStore, Store } from "solid-js/store";
+import type { Accessor, Resource } from "solid-js";
+import {
+  addToGlobal,
+  isDevEnvironment,
+  promiseWithResolvers,
+} from "../../utils/misc";
+import { kMaxLength } from "buffer";
+
+export type LoadError = Error | { message?: string };
+type State = Pick<Resource<unknown>, "loading" | "state"> & {
+  error?: LoadError;
+  ready: boolean;
+  refreshing: boolean;
+};
+
+export type LoadingStore<T> = {
+  /**
+   * request store to be loaded
+   */
+  load: () => void;
+
+  /**
+   * request store to be refreshed
+   */
+  refresh: () => void;
+
+  /**
+   * reset the resource +  store
+   */
+  reset: () => void;
+
+  /**
+   * store state
+   */
+  state: Accessor<State>;
+
+  /**
+   * the data store
+   */
+  store: Store<T>;
+
+  /**
+   * promise that resolves when the store is ready.
+   * rejects if shouldLoad is false
+   */
+  ready: () => Promise<void>;
+};
+
+export function createLoadingStore<T extends object>(
+  name: string,
+  fetcher: () => Promise<T>,
+  initialValue: () => T,
+): LoadingStore<T> {
+  console.debug(`LoadingStore ${name}: created`);
+  const [shouldLoad, setShouldLoad] = createSignal(false);
+  const [getState, setState] = createSignal<State>({
+    state: "unresolved",
+    loading: false,
+    ready: false,
+    refreshing: false,
+    error: undefined,
+  });
+
+  const [resource, { refetch }] = createResource(
+    () => (shouldLoad() ? true : null),
+    async () => {
+      return fetcher();
+    },
+  );
+
+  const [store, setStore] = createStore<T>(initialValue());
+  let ready = promiseWithResolvers();
+
+  const updateState = (
+    state: Resource<unknown>["state"],
+    error?: LoadError,
+  ): void => {
+    console.debug(`LoadingStore ${name}: update state to ${state}`);
+    setState({
+      state,
+      loading: state === "pending",
+      ready: state === "ready",
+      refreshing: state === "refreshing",
+      error: error,
+    });
+  };
+
+  createEffect(() => {
+    if (!shouldLoad()) {
+      updateState("unresolved");
+      return;
+    }
+    updateState("pending");
+
+    if (resource.error !== undefined) {
+      updateState("errored", resource.error as LoadError);
+      ready.reject(resource.error);
+      ready = promiseWithResolvers();
+      return;
+    }
+
+    const value = resource();
+    if (value !== undefined) {
+      setStore(value);
+      updateState("ready");
+      ready.resolve();
+      ready = promiseWithResolvers();
+    }
+  });
+
+  const load = (): void => {
+    if (!shouldLoad()) setShouldLoad(true);
+  };
+  const refresh = (): void => {
+    if (!shouldLoad()) {
+      setShouldLoad(true);
+    }
+    ready = promiseWithResolvers();
+    updateState("refreshing");
+    void refetch();
+  };
+
+  const reset = (): void => {
+    setShouldLoad(false);
+
+    setStore(initialValue());
+
+    // reject any waiters
+    //TODO figue out why this in unhandled
+    //ready.reject(new Error("Reset"));
+    ready = promiseWithResolvers();
+  };
+
+  return {
+    load,
+    refresh,
+    reset,
+    state: getState,
+    store,
+    ready: async () => {
+      load();
+      await ready.promise;
+      return;
+    },
+  };
+}