scoresaber-reloadedv3/src/components/loaders/database-loader.tsx

"use client";

import {createContext, useEffect, useState} from "react";
import Database, {db} from "../../common/database/database";
import FullscreenLoader from "./fullscreen-loader";

/**
 * The context for the database. This is used to access the database from within the app.
 */
export const DatabaseContext = createContext<Database | undefined>(undefined);

type Props = {
  children: React.ReactNode;
};

export default function DatabaseLoader({ children }: Props) {
  const [database, setDatabase] = useState<Database | undefined>(undefined);

  useEffect(() => {
    const before = performance.now();
    setDatabase(db);
    console.log(`Loaded database in ${performance.now() - before}ms`);
  }, []);

  return (
    <DatabaseContext.Provider value={database}>
      {database == undefined ? (
        <FullscreenLoader reason="Loading database..." />
      ) : (
        children
      )}
    </DatabaseContext.Provider>
  );
}