hunk.code_window:       if (blob) {
           if (extension === "docx") {
             renderer = Renderers.DOCX_VIEWER;
           } else if (extension === "xlsx") {
             renderer = Renderers.XLSX_VIEWER;
           }
         } else {
           errorMessage = "invalid base64 data";
           renderer = Renderers.ERROR;
         }
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit:         } else if (extension === "pdf") {
             viewer = "pdf";
  
hunk.file_path: app/client/src/widgets/DocumentViewerWidget/component/index.tsx
hunk.type: add
file: import React from "react";
  import styled, { keyframes } from "styled-components";
  import { sizeHandler, IconSize } from "./Icon";
  import { Classes } from "./common";
  
  const rotate = keyframes`
    100% {
      transform: rotate(360deg);
    }
  `;
  
  const dash = keyframes`
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  `;
  
  const SvgContainer = styled.svg<SpinnerProp>`
    animation: ${rotate} 2s linear infinite;
    width: ${(props) => sizeHandler(props.size)}px;
    height: ${(props) => sizeHandler(props.size)}px;
  `;
  
  const SvgCircle = styled.circle`
    stroke: ${(props) => props.theme.colors.spinner};
    stroke-linecap: round;
    animation: ${dash} 1.5s ease-in-out infinite;
    stroke-width: ${(props) => props.theme.spaces[1]}px;
  `;
  
  export type SpinnerProp = {
    size?: IconSize;
  };
  
  Spinner.defaultProp = {
    size: "small",
  };
  
  export default function Spinner(props: SpinnerProp) {
    return (
      <SvgContainer
        className={Classes.SPINNER}
        size={props.size}
        viewBox="0 0 50 50"
      >
        <SvgCircle cx="25" cy="25" fill="none" r="20" />
      </SvgContainer>
    );
  }
  