creevey 0.9.0-beta.20 → 0.9.0-beta.21

package/src/client/shared/helpers.ts

@@ -0,0 +1,422 @@
+import { themes, ThemeVars } from '@storybook/theming';
+import { parse, stringify } from 'qs';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { TestData, isTest, isDefined, TestStatus, CreeveySuite, CreeveyTest, CreeveyStatus } from '../../types.js';
+
+export interface CreeveyViewFilter {
+  status: TestStatus | null;
+  subStrings: string[];
+}
+
+export interface CreeveyTestsStatus {
+  successCount: number;
+  failedCount: number;
+  pendingCount: number;
+  skippedCount: number;
+}
+
+const statusUpdatesMap = new Map<TestStatus | undefined, RegExp>([
+  [undefined, /(unknown|success|failed|pending|running)/],
+  ['unknown', /(success|failed|pending|running)/],
+  ['success', /(failed|pending|running)/],
+  ['failed', /(pending|running)/],
+  ['pending', /running/],
+]);
+
+function makeEmptySuiteNode(path: string[] = []): CreeveySuite {
+  return {
+    path,
+    skip: true,
+    opened: false,
+    checked: true,
+    indeterminate: false,
+    children: {},
+  };
+}
+
+export function calcStatus(oldStatus?: TestStatus, newStatus?: TestStatus): TestStatus | undefined {
+  return newStatus && statusUpdatesMap.get(oldStatus)?.test(newStatus) ? newStatus : oldStatus;
+}
+
+export function getTestPath(test: Pick<TestData, 'browser' | 'testName' | 'storyPath'>): string[] {
+  const { browser, testName, storyPath } = test;
+  return [...storyPath, testName, browser].filter(isDefined);
+}
+
+export function getSuiteByPath(suite: CreeveySuite, path: string[]): CreeveySuite | CreeveyTest | undefined {
+  return path.reduce(
+    (suiteOrTest: CreeveySuite | CreeveyTest | undefined, pathToken) =>
+      isTest(suiteOrTest) ? suiteOrTest : suiteOrTest?.children[pathToken],
+    suite,
+  );
+}
+
+export function getTestByPath(suite: CreeveySuite, path: string[]): CreeveyTest | null {
+  const test = getSuiteByPath(suite, path) ?? suite;
+  return isTest(test) ? test : null;
+}
+
+export function getTestsByStoryId(suite: CreeveySuite, storyId: string): CreeveyTest[] {
+  return Object.values(suite.children)
+    .filter(isDefined)
+    .flatMap((suiteOrTest) => {
+      if (isTest(suiteOrTest)) return suiteOrTest.storyId === storyId ? suiteOrTest : [];
+
+      return getTestsByStoryId(suiteOrTest, storyId);
+    })
+    .filter(isDefined);
+}
+
+function checkTests(suiteOrTest: CreeveySuite | CreeveyTest, checked: boolean): void {
+  suiteOrTest.checked = checked;
+  if (!isTest(suiteOrTest)) {
+    suiteOrTest.indeterminate = false;
+    Object.values(suiteOrTest.children)
+      .filter(isDefined)
+      .forEach((child) => {
+        checkTests(child, checked);
+      });
+  }
+}
+
+function updateChecked(suite: CreeveySuite): void {
+  const children = Object.values(suite.children)
+    .filter(isDefined)
+    .filter((child) => !child.skip);
+  const checkedEvery = children.every((test) => test.checked);
+  const checkedSome = children.some((test) => test.checked);
+  const indeterminate =
+    children.some((test) => (isTest(test) ? false : test.indeterminate)) || (!checkedEvery && checkedSome);
+  const checked = indeterminate || suite.checked == checkedEvery ? suite.checked : checkedEvery;
+
+  suite.checked = checked;
+  suite.indeterminate = indeterminate;
+}
+
+export function checkSuite(suite: CreeveySuite, path: string[], checked: boolean): void {
+  const subSuite = getSuiteByPath(suite, path);
+  if (subSuite) checkTests(subSuite, checked);
+
+  path
+    .slice(0, -1)
+    .map((_, index, tokens) => tokens.slice(0, tokens.length - index))
+    .forEach((parentPath) => {
+      const parentSuite = getSuiteByPath(suite, parentPath);
+      if (isTest(parentSuite)) return;
+      if (parentSuite) updateChecked(parentSuite);
+    });
+
+  updateChecked(suite);
+}
+
+export function treeifyTests(testsById: CreeveyStatus['tests']): CreeveySuite {
+  const rootSuite: CreeveySuite = makeEmptySuiteNode();
+
+  rootSuite.opened = true;
+  Object.values(testsById).forEach((test) => {
+    if (!test) return;
+
+    const [browser, ...testPath] = getTestPath(test).reverse();
+
+    const lastSuite = testPath.reverse().reduce((suite, token) => {
+      const subSuite = suite.children[token] ?? makeEmptySuiteNode([...suite.path, token]);
+
+      subSuite.status = calcStatus(subSuite.status, test.status);
+
+      if (!test.skip) subSuite.skip = false;
+      if (!subSuite.skip) suite.skip = false;
+
+      suite.children[token] = subSuite;
+      suite.status = calcStatus(suite.status, subSuite.status);
+
+      if (isTest(subSuite)) {
+        throw new Error(`Suite and Test should not have same path '${JSON.stringify(getTestPath(subSuite))}'`);
+      }
+
+      return subSuite;
+    }, rootSuite);
+
+    lastSuite.children[browser] = { ...test, checked: true };
+  });
+
+  return rootSuite;
+}
+
+export function getCheckedTests(suite: CreeveySuite): CreeveyTest[] {
+  return Object.values(suite.children)
+    .filter(isDefined)
+    .flatMap((suiteOrTest) => {
+      if (isTest(suiteOrTest)) return suiteOrTest.checked ? suiteOrTest : [];
+      if (!suiteOrTest.checked && !suiteOrTest.indeterminate) return [];
+
+      return getCheckedTests(suiteOrTest);
+    });
+}
+
+export function updateTestStatus(suite: CreeveySuite, path: string[], update: Partial<TestData>): void {
+  const title = path.shift();
+
+  if (!title) return;
+
+  const suiteOrTest =
+    suite.children[title] ??
+    (suite.children[title] = {
+      ...(path.length == 0 ? (update as TestData) : makeEmptySuiteNode([...suite.path, title])),
+      checked: suite.checked,
+    });
+  if (isTest(suiteOrTest)) {
+    const test = suiteOrTest;
+    const { skip, status, results, approved } = update;
+    if (isDefined(skip)) test.skip = skip;
+    if (isDefined(status)) test.status = status;
+    if (isDefined(results)) {
+      if (test.results) test.results.push(...results);
+      else test.results = results;
+    }
+    if (isDefined(approved))
+      Object.entries(approved).forEach(
+        ([image, retry]) => retry !== undefined && ((test.approved = test.approved ?? {})[image] = retry),
+      );
+  } else {
+    const subSuite = suiteOrTest;
+    updateTestStatus(subSuite, path, update);
+  }
+  suite.skip = Object.values(suite.children)
+    .filter(isDefined)
+    .map(({ skip }) => skip)
+    .every(Boolean);
+  suite.status = Object.values(suite.children)
+    .filter(isDefined)
+    .map(({ status }) => status)
+    .reduce(calcStatus);
+}
+
+export function removeTests(suite: CreeveySuite, path: string[]): void {
+  const title = path.shift();
+
+  if (!title) return;
+
+  const suiteOrTest = suite.children[title];
+  if (suiteOrTest && !isTest(suiteOrTest)) removeTests(suiteOrTest, path);
+  if (isTest(suiteOrTest) || Object.keys(suiteOrTest?.children ?? {}).length == 0) {
+    // TODO Use Map instead
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete suite.children[title];
+  }
+  if (Object.keys(suite.children).length == 0) return;
+  updateChecked(suite);
+  suite.skip = Object.values(suite.children)
+    .filter(isDefined)
+    .map(({ skip }) => skip)
+    .every(Boolean);
+  suite.status = Object.values(suite.children)
+    .filter(isDefined)
+    .map(({ status }) => status)
+    .reduce(calcStatus);
+}
+
+export function filterTests(suite: CreeveySuite, filter: CreeveyViewFilter): CreeveySuite {
+  const { status, subStrings } = filter;
+  if (!status && !subStrings.length) return suite;
+  const filteredSuite: CreeveySuite = { ...suite, children: {} };
+
+  Object.entries(suite.children).forEach(([title, suiteOrTest]) => {
+    if (!suiteOrTest || suiteOrTest.skip) return;
+    if (!status && subStrings.some((subString) => title.toLowerCase().includes(subString))) {
+      filteredSuite.children[title] = suiteOrTest;
+    } else if (isTest(suiteOrTest)) {
+      if (status && suiteOrTest.status && ['pending', 'running', status].includes(suiteOrTest.status))
+        filteredSuite.children[title] = suiteOrTest;
+    } else {
+      const filteredSubSuite = filterTests(suiteOrTest, filter);
+      if (Object.keys(filteredSubSuite.children).length == 0) return;
+
+      filteredSuite.children[title] = filteredSubSuite;
+    }
+  });
+
+  return filteredSuite;
+}
+
+export function openSuite(suite: CreeveySuite, path: string[], opened: boolean): void {
+  const subSuite = path.reduce((suiteOrTest: CreeveySuite | CreeveyTest | undefined, pathToken) => {
+    if (suiteOrTest && !isTest(suiteOrTest)) {
+      if (opened) suiteOrTest.opened = opened;
+      return suiteOrTest.children[pathToken];
+    }
+  }, suite);
+  if (subSuite && !isTest(subSuite)) subSuite.opened = opened;
+}
+
+export function flattenSuite(suite: CreeveySuite): { title: string; suite: CreeveySuite | CreeveyTest }[] {
+  if (!suite.opened) return [];
+  return Object.entries(suite.children).flatMap(([title, subSuite]) =>
+    subSuite ? [{ title, suite: subSuite }, ...(isTest(subSuite) ? [] : flattenSuite(subSuite))] : [],
+  );
+}
+
+export function countTestsStatus(suite: CreeveySuite): CreeveyTestsStatus {
+  let successCount = 0;
+  let failedCount = 0;
+  let skippedCount = 0;
+  let pendingCount = 0;
+
+  const cases: (CreeveySuite | CreeveyTest)[] = Object.values(suite.children).filter(isDefined);
+  let suiteOrTest;
+  while ((suiteOrTest = cases.pop())) {
+    if (isTest(suiteOrTest)) {
+      if (suiteOrTest.skip) skippedCount++;
+      if (suiteOrTest.status === 'success') successCount++;
+      if (suiteOrTest.status === 'failed') failedCount++;
+      if (suiteOrTest.status === 'pending') pendingCount++;
+    } else {
+      cases.push(...Object.values(suiteOrTest.children).filter(isDefined));
+    }
+  }
+
+  return { successCount, failedCount, skippedCount, pendingCount };
+}
+
+export function getConnectionUrl(): string {
+  return [
+    typeof __CREEVEY_SERVER_HOST__ == 'undefined' ? window.location.hostname : __CREEVEY_SERVER_HOST__,
+    typeof __CREEVEY_SERVER_PORT__ == 'undefined' ? window.location.port : __CREEVEY_SERVER_PORT__,
+  ]
+    .filter(Boolean)
+    .join(':');
+}
+
+export function getImageUrl(path: string[], imageName: string): string {
+  // path => [title, story, test, browser]
+  const browser = path.slice(-1)[0];
+  const imagesUrl = window.location.host
+    ? `${window.location.protocol}//${getConnectionUrl()}${
+        window.location.pathname == '/' ? '/report' : window.location.pathname.split('/').slice(0, -1).join('/')
+      }/${encodeURI(path.slice(0, -1).join('/'))}`
+    : encodeURI(path.slice(0, -1).join('/'));
+
+  return imageName == browser ? imagesUrl : `${imagesUrl}/${encodeURI(browser)}`;
+}
+
+export function getBorderSize(element: HTMLElement): number {
+  // NOTE Firefox returns empty string for `borderWidth` prop
+  const borderSize = parseFloat(getComputedStyle(element).borderTopWidth);
+  return Number.isNaN(borderSize) ? 0 : borderSize;
+}
+
+export function useLoadImages(s1: string, s2: string, s3: string): boolean {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    setLoaded(false);
+    void Promise.all(
+      [s1, s2, s3].map(
+        (url) =>
+          new Promise((resolve) => {
+            const image = document.createElement('img');
+            image.src = url;
+            image.onload = resolve;
+            image.onerror = resolve;
+          }),
+      ),
+    ).then(() => {
+      setLoaded(true);
+    });
+  }, [s1, s2, s3]);
+
+  return loaded;
+}
+
+/**
+ * Uses the ResizeObserver API to observe changes within the given HTML Element DOM Rect.
+ *
+ * @returns dimensions of element's content box (which means without paddings and border width)
+ */
+export function useResizeObserver<T extends Element>(
+  elementRef: RefObject<T>,
+  onResize: () => void,
+  debounceTimeout = 16,
+): void {
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  useEffect(() => {
+    if (!elementRef.current) return;
+
+    observerRef.current = new ResizeObserver(onResize);
+    observerRef.current.observe(elementRef.current);
+
+    return () => observerRef.current?.disconnect();
+  }, [debounceTimeout, elementRef, onResize]);
+}
+
+export function useApplyScale(imageRef: RefObject<HTMLImageElement>, scale: number, dependency?: unknown): void {
+  useLayoutEffect(() => {
+    if (!imageRef.current) return;
+    const image = imageRef.current;
+    const borderSize = getBorderSize(image);
+    image.style.height = `${image.naturalHeight * scale + borderSize * 2}px`;
+  }, [imageRef, scale, dependency]);
+}
+
+export function useCalcScale(diffImageRef: RefObject<HTMLImageElement>, loaded: boolean): number {
+  const [scale, setScale] = useState(1);
+
+  const calcScale = useCallback(() => {
+    const diffImage = diffImageRef.current;
+
+    if (!diffImage || !loaded) {
+      setScale(1);
+      return;
+    }
+    const borderSize = getBorderSize(diffImage);
+    const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
+    setScale(Math.min(1, ratio));
+  }, [diffImageRef, loaded]);
+
+  useResizeObserver(diffImageRef, calcScale);
+  useLayoutEffect(calcScale, [calcScale]);
+
+  return scale;
+}
+
+const CREEVEY_THEME = 'Creevey_theme';
+
+function isTheme(theme?: string | null): theme is ThemeVars['base'] {
+  return isDefined(theme) && Object.prototype.hasOwnProperty.call(themes, theme);
+}
+
+function initialTheme(): ThemeVars['base'] {
+  const theme = localStorage.getItem(CREEVEY_THEME);
+  return isTheme(theme) ? theme : 'light';
+}
+
+export function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void] {
+  const [theme, setTheme] = useState<ThemeVars['base']>(initialTheme());
+
+  useEffect(() => {
+    localStorage.setItem(CREEVEY_THEME, theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+}
+
+export function setSearchParams(testPath: string[]): void {
+  const pageUrl = `?${stringify({ testPath })}`;
+  window.history.pushState({ testPath }, '', pageUrl);
+}
+
+export function getTestPathFromSearch(): string[] {
+  const { testPath } = parse(window.location.search.slice(1));
+  if (Array.isArray(testPath) && testPath.every((token) => typeof token == 'string')) {
+    return testPath;
+  }
+  return [];
+}
+
+export function useForceUpdate(): () => void {
+  const [, update] = useState({});
+
+  return useCallback(() => {
+    update({});
+  }, []);
+}

package/src/client/shared/viewMode.ts

@@ -0,0 +1,10 @@
+import { ImagesViewMode } from '../../types.js';
+
+export const VIEW_MODE_KEY = 'Creevey_view_mode';
+
+export const viewModes: ImagesViewMode[] = ['side-by-side', 'swap', 'slide', 'blend'];
+
+export const getViewMode = (): ImagesViewMode => {
+  const item = localStorage.getItem(VIEW_MODE_KEY);
+  return item && viewModes.includes(item as ImagesViewMode) ? (item as ImagesViewMode) : 'side-by-side';
+};

package/src/client/web/CreeveyApp.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useImmer } from 'use-immer';
+import { ensure, styled, ThemeProvider, themes, withTheme } from '@storybook/theming';
+import { CreeveyUpdate, CreeveySuite, isDefined, CreeveyTest } from '../../types.js';
+import { CreeveyClientApi } from '../shared/creeveyClientApi.js';
+import {
+  getCheckedTests,
+  updateTestStatus,
+  checkSuite,
+  openSuite,
+  getTestByPath,
+  removeTests,
+  getTestPath,
+  useTheme,
+  setSearchParams,
+  getTestPathFromSearch,
+  CreeveyViewFilter,
+} from '../shared/helpers.js';
+import { CreeveyContext } from './CreeveyContext.js';
+import { KeyboardEvents } from './KeyboardEventsContext.js';
+import { SideBar } from './CreeveyView/SideBar/index.js';
+import { ResultsPage } from '../shared/components/ResultsPage.js';
+import { Toggle } from './CreeveyView/SideBar/Toggle.js';
+
+export interface CreeveyAppProps {
+  api?: CreeveyClientApi;
+  initialState: {
+    tests: CreeveySuite;
+    isRunning: boolean;
+    isReport: boolean;
+  };
+}
+
+const FlexContainer = withTheme(
+  styled.div(({ theme }) => ({
+    height: '100vh',
+    display: 'flex',
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  })),
+);
+
+const ToggleContainer = styled.div({
+  zIndex: 1,
+  position: 'absolute',
+  right: 10,
+  top: 10,
+});
+
+export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element {
+  const [tests, updateTests] = useImmer(initialState.tests);
+  const [isRunning, setIsRunning] = useState(initialState.isRunning);
+  const [openedTestPath, openTest] = useState<string[]>([]);
+  const [filter, setFilter] = useState<CreeveyViewFilter>({ status: null, subStrings: [] });
+  const [theme, setTheme] = useTheme();
+
+  const openedTest = getTestByPath(tests, openedTestPath);
+  if (openedTestPath.length > 0 && !isDefined(openedTest)) openTest([]);
+
+  const handleSuiteOpen = useCallback(
+    (path: string[], opened: boolean): void => {
+      updateTests((draft) => {
+        openSuite(draft, path, opened);
+      });
+    },
+    [updateTests],
+  );
+  const handleSuiteToggle = useCallback(
+    (path: string[], checked: boolean): void => {
+      updateTests((draft) => {
+        checkSuite(draft, path, checked);
+      });
+    },
+    [updateTests],
+  );
+  const handleImageApprove = useCallback(
+    (id: string, retry: number, image: string): void => api?.approve(id, retry, image),
+    [api],
+  );
+  const handleStart = useCallback(
+    (tests: CreeveySuite): void => api?.start(getCheckedTests(tests).map((test) => test.id)),
+    [api],
+  );
+  const handleStop = useCallback((): void => api?.stop(), [api]);
+  const handleThemeChange = useCallback(
+    (isDark: boolean): void => {
+      setTheme(isDark ? 'dark' : 'light');
+    },
+    [setTheme],
+  );
+  const handleOpenTest = useCallback((test: CreeveyTest): void => {
+    const testPath = getTestPath(test);
+    setSearchParams(testPath);
+    openTest(testPath);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('popstate', (event) => {
+      updateTests((draft) => {
+        const state = event.state as unknown;
+        if (state && typeof state == 'object' && 'testPath' in state) {
+          const { testPath } = state as { testPath?: string[] };
+          if (Array.isArray(testPath)) {
+            // TODO Add validations
+            openSuite(draft, testPath, true);
+            openTest(testPath);
+          }
+        }
+      });
+    });
+    updateTests((draft) => {
+      const testPath = getTestPathFromSearch();
+
+      openSuite(draft, testPath, true);
+      openTest(testPath);
+    });
+  }, [updateTests]);
+
+  // TODO unsubscribe
+  useEffect(
+    () =>
+      api?.onUpdate(({ isRunning, tests, removedTests = [] }: CreeveyUpdate) => {
+        if (isDefined(isRunning)) setIsRunning(isRunning);
+        if (isDefined(tests))
+          updateTests((draft) => {
+            Object.values(tests).forEach((test) => {
+              if (test) updateTestStatus(draft, getTestPath(test), test);
+            });
+            removedTests.forEach((test) => {
+              removeTests(draft, getTestPath(test));
+            });
+          });
+      }),
+    [api, updateTests],
+  );
+
+  return (
+    <CreeveyContext.Provider
+      value={{
+        isReport: initialState.isReport,
+        isRunning,
+        onStart: handleStart,
+        onStop: handleStop,
+        onSuiteOpen: handleSuiteOpen,
+        onSuiteToggle: handleSuiteToggle,
+      }}
+    >
+      <ThemeProvider theme={ensure(themes[theme])}>
+        <KeyboardEvents rootSuite={tests} filter={filter}>
+          <FlexContainer>
+            <SideBar
+              rootSuite={tests}
+              openedTest={openedTest}
+              onOpenTest={handleOpenTest}
+              filter={filter}
+              setFilter={setFilter}
+            />
+            {openedTest && (
+              <ResultsPage
+                key={`${openedTest.id}_${openedTest.results?.length ?? 0}`}
+                id={openedTest.id}
+                path={openedTestPath}
+                results={openedTest.results}
+                approved={openedTest.approved}
+                showTitle
+                onImageApprove={handleImageApprove}
+              />
+            )}
+            <ToggleContainer>
+              <Toggle value={theme == 'dark'} onChange={handleThemeChange} />
+            </ToggleContainer>
+          </FlexContainer>
+        </KeyboardEvents>
+      </ThemeProvider>
+    </CreeveyContext.Provider>
+  );
+}

package/src/client/web/CreeveyContext.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CreeveySuite, noop } from '../../types.js';
+
+export interface CreeveyContextType {
+  isReport: boolean;
+  isRunning: boolean;
+  onStop: () => void;
+  onStart: (rootSuite: CreeveySuite) => void;
+  onSuiteOpen: (path: string[], opened: boolean) => void;
+  onSuiteToggle: (path: string[], checked: boolean) => void;
+}
+
+export const CreeveyContext = React.createContext<CreeveyContextType>({
+  isReport: true,
+  isRunning: false,
+  onStop: noop,
+  onStart: noop,
+  onSuiteOpen: noop,
+  onSuiteToggle: noop,
+});

package/src/client/web/CreeveyLoader.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from '@storybook/theming';
+import { useTheme } from '../shared/helpers.js';
+
+const Container = withTheme(
+  styled.div(({ theme }) => ({
+    height: '100vh',
+    width: '100vw',
+    background: theme.background.app,
+  })),
+);
+
+const Loader = withTheme(
+  styled.div<{ size?: number; theme: Theme }>(({ size = 32, theme }) => ({
+    borderRadius: '50%',
+    cursor: 'progress',
+    display: 'inline-block',
+    overflow: 'hidden',
+    position: 'absolute',
+    transition: 'all 200ms ease-out',
+    verticalAlign: 'top',
+    top: '50%',
+    left: '50%',
+    marginTop: -(size / 2),
+    marginLeft: -(size / 2),
+    height: size,
+    width: size,
+    zIndex: 4,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: theme.base === 'light' ? 'rgba(97, 97, 97, 0.29)' : 'rgba(255, 255, 255, 0.2)',
+    borderTopColor: theme.base === 'light' ? 'rgb(100,100,100)' : 'rgba(255, 255, 255, 0.4)',
+    animation: `${rotate360} 0.7s linear infinite`,
+    mixBlendMode: 'difference',
+  })),
+);
+
+export const rotate360: Keyframes = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export function CreeveyLoader(): JSX.Element {
+  const [theme] = useTheme();
+  return (
+    <ThemeProvider theme={ensure(themes[theme])}>
+      <Container>
+        <Loader size={64} />
+      </Container>
+    </ThemeProvider>
+  );
+}