feat: add skeleton loading placeholders for detail cards and fix sele…

…ct field option (#157)

* Add background back to SelectField

* Add Shimmer loading to details

* Add loading states to design system

src/components/Card/DetailsCard/index.tsx

@@ -3,8 +3,12 @@ import styled from "styled-components";
 import classNames from "classnames";
 
 import Card from "src/components/Card";
-import Spinner from "src/components/Spinner";
 import Text from "src/components/Text";
+import {
+  HeadingShimmer,
+  ParagraphShimmer,
+  SubheadingShimmer,
+} from "src/components/Shimmer";
 import SelectField, { ISelectFieldProps } from "src/components/SelectField";
 import { MOBILE_MENU_MEDIA_QUERY } from "src/components/PageHeader";
 import { ICardProps } from "../RawCard";
@@ -60,6 +64,27 @@ const Container = styled(Card)`
   `}
 `;
 
+const LoadingContainer = styled.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  & > .loadingHeading {
+    margin-bottom: 24px;
+  }
+`;
+const DetailsCardLoadingShimmer = () => (
+  <LoadingContainer>
+    <div className="loadingHeading">
+      <HeadingShimmer />
+      <SubheadingShimmer />
+    </div>
+    <ParagraphShimmer />
+  </LoadingContainer>
+);
+
 /*******************************************************************
  *                           **Component**                         *
  *******************************************************************/
@@ -83,7 +108,7 @@ const DetailsCard: React.FC<IDetailsCardProps> = ({
         {ERROR_OCCURRED_TEXT}
       </Text>
     ) : loading ? (
-      <Spinner className="loading" />
+      <DetailsCardLoadingShimmer />
     ) : (
       children
     )}

src/components/Checkbox/index.tsx

@@ -47,6 +47,7 @@ const sharedStyles = css`
 
 const disabledStyles = css`
   &:disabled {
+    background-color: ${({ theme }) => theme.color.backgroundSecondary};
     cursor: not-allowed;
   }
 

src/components/PageFooter/copy.tsx

@@ -76,23 +76,23 @@ const COPY = {
   getSubtext,
   sublinks: [
     {
-      to: `mailto:${EMAIL}`,
-      label: "get in touch",
+      to: RouteName.DESIGN,
+      label: "design system",
       newTab: false,
     },
     {
-      to: FEEDBACK_LINK,
-      label: "submit feedback",
+      to: "https://github.com/alexieyizhe/intern.plus",
+      label: "open source",
       newTab: true,
     },
     {
-      to: "https://github.com/alexieyizhe/intern.plus",
-      label: "open source",
+      to: FEEDBACK_LINK,
+      label: "submit feedback",
       newTab: true,
     },
     {
-      to: RouteName.DESIGN,
-      label: "design system",
+      to: `mailto:${EMAIL}`,
+      label: "get in touch",
       newTab: false,
     },
   ],

src/components/SelectField/index.tsx

@@ -33,7 +33,7 @@ export interface ISelectFieldProps
  *                  **Utility functions/constants**                *
  *******************************************************************/
 const renderSuggestion = (suggestion: { label: string; value: string }) => (
-  <Suggestion color="textTertiary" key={suggestion.value}>
+  <Suggestion backgroundColor="textTertiary" key={suggestion.value}>
     <Text variant="subheading" color="textPrimary">
       {suggestion.label}
     </Text>

src/components/Shimmer/HeadingShimmer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { Size } from "src/theme";
+
+import Shimmer from "./Shimmer";
+
+export const HeadingShimmer = () => (
+  <Shimmer width="24rem" textSize={Size.XL} />
+);

src/components/Shimmer/ParagraphShimmer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import Shimmer from "./Shimmer";
+
+export const ParagraphShimmer = () => (
+  <>
+    <Shimmer />
+    <Shimmer />
+    <Shimmer width="80%" />
+  </>
+);

src/components/Shimmer/Shimmer.tsx

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+import { Size } from "src/theme";
+
+export default styled.div<{
+  width?: string;
+  height?: string;
+  textSize?: Size;
+}>`
+  background: ${({ theme }) => theme.color.textTertiary};
+  background-image: linear-gradient(
+    to right,
+    ${({ theme }) => theme.color.textTertiary} 0%,
+    ${({ theme }) => theme.color.textSecondary} 25%,
+    ${({ theme }) => theme.color.textTertiary} 60%,
+    ${({ theme }) => theme.color.textTertiary} 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 800px 104px;
+  display: flex;
+  flex: 1;
+  position: relative;
+  border-radius: ${({ theme }) => theme.borderRadius.large}px;
+  opacity: 0.8;
+  margin-bottom: 12px;
+
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderShimmer;
+  animation-timing-function: linear;
+
+  ${({ width }) => (width ? `width: ${width}` : "")};
+  ${({ height }) => (height ? `height: ${height}` : "")};
+
+  font-size: ${({ textSize = Size.SMALL, theme }) =>
+    theme.fontSize[textSize]}px;
+
+  @keyframes placeholderShimmer {
+    0% {
+      background-position: -400px 0;
+    }
+
+    100% {
+      background-position: 800px 0;
+    }
+  }
+
+  &:after {
+    color: transparent;
+    content: "a";
+  }
+`;

src/components/Shimmer/SubheadingShimmer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { Size } from "src/theme";
+
+import Shimmer from "./Shimmer";
+
+export const SubheadingShimmer = () => (
+  <Shimmer width="18rem" textSize={Size.LARGE} />
+);

src/components/Shimmer/index.tsx

@@ -0,0 +1,4 @@
+export { default as Shimmer } from "./Shimmer";
+export { HeadingShimmer } from "./HeadingShimmer";
+export { SubheadingShimmer } from "./SubheadingShimmer";
+export { ParagraphShimmer } from "./ParagraphShimmer";

src/components/index.tsx

@@ -37,6 +37,8 @@ export * from "./SearchResultCardDisplay";
 export { default as Select } from "./Select";
 export * from "./Select";
 
+export * from "./Shimmer";
+
 export { default as Spinner } from "./Spinner";
 export * from "./Spinner";
 

src/pages/design-system/components/Section.tsx

@@ -7,9 +7,9 @@ export interface ISectionProps {
   heading?: string;
 }
 
-const Container = styled.div`
+const Container = styled.section`
   min-width: 40%;
-  margin: 10px 10% 50px 0;
+  margin: 10px 5% 50px 0;
 
   display: inline-flex;
   flex-direction: column;

src/pages/design-system/page.tsx

@@ -23,6 +23,9 @@ import {
   TextInput,
   Icon,
   IconName,
+  Spinner,
+  HeadingShimmer,
+  ParagraphShimmer,
 } from "src/components";
 import { useScrollTopOnMount } from "src/shared/hooks/useScrollTopOnMount";
 
@@ -71,6 +74,12 @@ const SectionSpacer = styled.div`
   }
 `;
 
+const DesignPageContainer = styled(PageContainer)`
+  & > section {
+    max-width: 45%;
+  }
+`;
+
 const PaletteSquare = styled(Card)`
   width: 100px;
   height: 100px;
@@ -80,8 +89,8 @@ const PaletteSquare = styled(Card)`
   justify-content: center;
   align-items: center;
 
-  ${({ theme, color }) =>
-    color === theme.color.backgroundPrimary &&
+  ${({ theme, backgroundColor }) =>
+    backgroundColor === theme.color.backgroundPrimary &&
     `border: 2px solid ${theme.color.textPrimary}`};
 `;
 
@@ -102,15 +111,15 @@ const DesignSystemPage = () => {
         <title>Design system • intern+</title>
       </Helmet>
 
-      <PageContainer id="design-system-page">
+      <DesignPageContainer id="design-system-page">
         <Text variant="heading1" as="h1">
           Design System
         </Text>
 
         <Section heading="Colors">
           <SectionSpacer>
             {(Object.values(theme.color) as string[]).map((color: string) => (
-              <PaletteSquare color={color} key={color}>
+              <PaletteSquare backgroundColor={color} key={color}>
                 <Text
                   variant="subheading"
                   color={
@@ -326,7 +335,13 @@ const DesignSystemPage = () => {
             </Text>
           </LandingReviewCard>
         </Section>
-      </PageContainer>
+
+        <Section heading="Loading States">
+          <HeadingShimmer />
+          <ParagraphShimmer />
+          <Spinner />
+        </Section>
+      </DesignPageContainer>
     </>
   );
 };