Add loading component

Author: robertbrignull

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisLoading.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { VariantAnalysisLoading as VariantAnalysisLoadingComponent } from '../../view/variant-analysis/VariantAnalysisLoading';
+
+export default {
+  title: 'Variant Analysis/Variant Analysis Loading',
+  component: VariantAnalysisLoadingComponent,
+  decorators: [
+    (Story) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {}
+} as ComponentMeta<typeof VariantAnalysisLoadingComponent>;
+
+const Template: ComponentStory<typeof VariantAnalysisLoadingComponent> = () => (
+  <VariantAnalysisLoadingComponent />
+);
+
+export const VariantAnalysisLoading = Template.bind({});

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisLoading.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const FirstRow = styled.div`
+  font-size: x-large;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 0.5em;
+`;
+
+const SecondRow = styled.div`
+  text-align: center;
+  color: var(--vscode-descriptionForeground);
+`;
+
+export const VariantAnalysisLoading = () => {
+  return (
+    <div>
+      <FirstRow>We are getting everything ready</FirstRow>
+      <SecondRow>Results will appear here shortly</SecondRow>
+    </div>
+  );
+};

extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisLoading.spec.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { render as reactRender, screen } from '@testing-library/react';
+import { VariantAnalysisLoading } from '../VariantAnalysisLoading';
+
+describe(VariantAnalysisLoading.name, () => {
+  const render = () =>
+    reactRender(<VariantAnalysisLoading />);
+
+  it('renders loading text', async () => {
+    render();
+
+    expect(screen.getByText('We are getting everything ready')).toBeInTheDocument();
+    expect(screen.getByText('Results will appear here shortly')).toBeInTheDocument();
+  });
+});