diff --git a/packages/compass-components/src/components/content-with-fallback.spec.tsx b/packages/compass-components/src/components/content-with-fallback.spec.tsx
deleted file mode 100644
index d8329bc8751..00000000000
--- a/packages/compass-components/src/components/content-with-fallback.spec.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import {
- render,
- screen,
- cleanup,
- waitFor,
-} from '@mongodb-js/testing-library-compass';
-import { expect } from 'chai';
-import { ContentWithFallback } from './content-with-fallback';
-
-describe('ContentWithFallback', function () {
- afterEach(cleanup);
-
- function TestContentWithFallback({
- isContentReady,
- fallbackTimeout,
- contentAfterFallbackTimeout,
- }: {
- isContentReady: boolean;
- fallbackTimeout?: number;
- contentAfterFallbackTimeout?: number;
- }) {
- return (
-
- ready && (
-
- I am ready!
-
- )
- }
- fallback={(notReady) =>
- notReady && I am not ready yet!
- }
- isContentReady={isContentReady}
- fallbackTimeout={fallbackTimeout}
- contentAfterFallbackTimeout={contentAfterFallbackTimeout}
- >
- );
- }
-
- it('should render content immediately if content is ready on the first render', function () {
- render(
-
- );
-
- expect(screen.getByText('I am ready!')).to.exist;
- });
-
- it('should render only the context menu when content is not ready on the first render', function () {
- const container = document.createElement('div');
-
- render(
- ,
- { container }
- );
-
- expect(container.children.length).to.equal(2);
- const [contentContainer, contextMenuContainer] = Array.from(
- container.children
- );
- expect(contentContainer.children.length).to.equal(1);
- expect(contextMenuContainer.getAttribute('data-testid')).to.equal(
- 'context-menu-container'
- );
- const copyPasteContextMenu = contentContainer.children[0];
- expect(copyPasteContextMenu.children.length).to.equal(0);
- expect(copyPasteContextMenu.getAttribute('data-testid')).to.equal(
- 'copy-paste-context-menu-container'
- );
- });
-
- it('should render fallback when the timeout passes', async function () {
- render(
-
- );
-
- await waitFor(() => screen.getByText('I am not ready yet!'));
- });
-
- it('should render content with animation if rendered after fallback', async function () {
- const { rerender } = render(
-
- );
-
- await waitFor(() => screen.getByText('I am not ready yet!'));
-
- rerender(
-
- );
-
- await waitFor(() => screen.getByText('I am ready!'));
-
- expect(screen.getByText('I am ready!')).to.have.attribute(
- 'data-animated',
- 'true'
- );
- });
-});
diff --git a/packages/compass-components/src/components/content-with-fallback.tsx b/packages/compass-components/src/components/content-with-fallback.tsx
deleted file mode 100644
index cb71a4a754d..00000000000
--- a/packages/compass-components/src/components/content-with-fallback.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useEffect, useState } from 'react';
-import { css, cx, keyframes } from '@leafygreen-ui/emotion';
-
-enum RenderStatus {
- Nothing = 'Nothing',
- Fallback = 'Fallback',
- Content = 'Content',
- // If content is appearing after fallback was displayed, we want to signal
- // this so that content might want to animate the transition
- ContentAnimated = 'ContentAnimated',
-}
-function isContent(status: RenderStatus): boolean {
- return [RenderStatus.ContentAnimated, RenderStatus.Content].includes(status);
-}
-function useRenderWithFallback(
- isContentReady: boolean,
- { contentAfterFallbackTimeout = 200, fallbackTimeout = 30 } = {}
-) {
- const [renderStatus, setRenderStatus] = useState(
- isContentReady ? RenderStatus.Content : RenderStatus.Nothing
- );
-
- useEffect(() => {
- if (isContent(renderStatus)) {
- return;
- }
- if (isContentReady && renderStatus === RenderStatus.Nothing) {
- setRenderStatus(RenderStatus.Content);
- return;
- }
- if (isContentReady && renderStatus === RenderStatus.Fallback) {
- const timeout = setTimeout(() => {
- setRenderStatus(RenderStatus.ContentAnimated);
- }, contentAfterFallbackTimeout);
- return () => {
- clearTimeout(timeout);
- };
- }
- if (!isContentReady && renderStatus === RenderStatus.Nothing) {
- const timeout = setTimeout(() => {
- setRenderStatus(RenderStatus.Fallback);
- }, fallbackTimeout);
- return () => {
- clearTimeout(timeout);
- };
- }
- }, [
- renderStatus,
- isContentReady,
- contentAfterFallbackTimeout,
- fallbackTimeout,
- ]);
-
- return renderStatus;
-}
-export const ContentWithFallback: React.FunctionComponent<{
- content(
- shouldRender: boolean,
- shouldAnimate: boolean
- ): React.ReactElement | boolean | null;
- fallback(shouldRender: boolean): React.ReactElement | boolean | null;
- isContentReady: boolean;
- contentAfterFallbackTimeout?: number;
- fallbackTimeout?: number;
-}> = ({
- content,
- fallback,
- isContentReady,
- contentAfterFallbackTimeout,
- fallbackTimeout,
-}) => {
- const renderStatus = useRenderWithFallback(isContentReady, {
- contentAfterFallbackTimeout,
- fallbackTimeout,
- });
-
- return (
- <>
- {content(
- isContent(renderStatus),
- renderStatus === RenderStatus.ContentAnimated
- )}
- {fallback(renderStatus === RenderStatus.Fallback)}
-
- );
-};
-
-const contentWithFallbackContainer = css({
- position: 'relative',
-});
-
-const fadeInAnimation = keyframes({
- from: {
- opacity: 0,
- },
- to: {
- opacity: 1,
- },
-});
-
-const contentContainer = css({
- position: 'relative',
-});
-
-const contentContainerFadeIn = css({
- animation: `${fadeInAnimation} .16s ease-out`,
-});
-
-const fallbackContainer = css({
- position: 'absolute',
- top: 0,
- right: 0,
- bottom: 0,
- left: 0,
- pointerEvents: 'none',
- display: 'none',
-});
-
-const fallbackContainerVisible = css({
- display: 'block',
-});
-
-type FadeInPlaceholderProps = {
- isContentReady: boolean;
- content(): React.ReactElement | boolean | null;
- fallback(): React.ReactElement | boolean | null;
- contentContainerProps?: React.HTMLProps;
- fallbackContainerProps?: React.HTMLProps;
-};
-
-export const FadeInPlaceholder: React.FunctionComponent<
- FadeInPlaceholderProps &
- Omit, keyof FadeInPlaceholderProps>
-> = ({
- content,
- fallback,
- isContentReady,
- contentContainerProps = {},
- fallbackContainerProps = {},
- className,
- ...props
-}) => {
- return (
-
-
{
- return (
- shouldRender && (
-
- {content()}
-
- )
- );
- }}
- fallback={(shouldRender) => {
- return (
-
- {fallback()}
-
- );
- }}
- >
-