Replace default loading text with skeleton

src/components/UI/Skeleton/Skeleton.styled.tsx

@@ -0,0 +1,13 @@
+import { keyframes, styled } from "src/styles/stitches.config";
+
+const pulseAnimation = keyframes({
+  "50%": { opacity: 0.5 },
+});
+
+const SkeletonStyled = styled("div", {
+  animation: `${pulseAnimation} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;`,
+  borderRadius: "0.375rem",
+  backgroundColor: "rgb(17 24 39 / 0.4)",
+});
+
+export { SkeletonStyled };

src/components/UI/Skeleton/Skeleton.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { SkeletonStyled } from "./Skeleton.styled";
+
+const Skeleton: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  ...props
+}) => {
+  return <SkeletonStyled {...props} />;
+};
+
+export default Skeleton;

src/components/Viewer/Viewer/ViewerSkeleton.styled.tsx

@@ -0,0 +1,62 @@
+import { styled } from "src/styles/stitches.config";
+import Skeleton from "src/components/UI/Skeleton/Skeleton";
+
+const TitleSkeleton = styled(Skeleton, {
+  margin: "1rem",
+  width: "340px",
+  height: "30px",
+});
+
+const ViewerContainer = styled("div", {
+  display: "flex",
+  flexDirection: "row",
+});
+
+const ViewerSkeletonWrapper = styled(Skeleton, {
+  variants: {
+    hasInformationPanel: {
+      true: {
+        width: "61.8%",
+      },
+      false: {
+        width: "100%",
+      },
+    },
+  },
+  height: "500px",
+  marginRight: "0.25rem",
+});
+
+const InformationPanel = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  rowGap: "0.25rem",
+  width: "38.2%",
+  marginLeft: "0.25rem",
+});
+
+const TabSkeleton = styled(Skeleton, {
+  width: "100%",
+  height: "40px",
+});
+
+const TextContainer = styled("div", {
+  padding: "1.618rem 0px",
+  display: "flex",
+  flexDirection: "column",
+  rowGap: "0.5rem",
+});
+
+const TextSkeleton = styled(Skeleton, {
+  height: "20px",
+});
+
+export {
+  TitleSkeleton,
+  ViewerContainer,
+  ViewerSkeletonWrapper,
+  InformationPanel,
+  TabSkeleton,
+  TextContainer,
+  TextSkeleton,
+};

src/components/Viewer/Viewer/ViewerSkeleton.tsx

@@ -0,0 +1,51 @@
+import { ViewerConfigOptions } from "src/context/viewer-context";
+import {
+  TitleSkeleton,
+  ViewerContainer,
+  ViewerSkeletonWrapper,
+  InformationPanel,
+  TabSkeleton,
+  TextContainer,
+  TextSkeleton,
+} from "./ViewerSkeleton.styled";
+
+export interface ViewerSkeletonProps {
+  options: ViewerConfigOptions | undefined;
+}
+
+const ViewerSkeleton: React.FC<ViewerSkeletonProps> = ({ options }) => {
+  return (
+    <>
+      {/* Title */}
+      <TitleSkeleton />
+
+      <ViewerContainer>
+        {/* Viewer */}
+        <ViewerSkeletonWrapper
+          hasInformationPanel={!!options?.informationPanel?.open}
+          css={{ height: options?.canvasHeight || "500px" }}
+        />
+
+        {/* Information Panel */}
+        {!!options?.informationPanel?.open && (
+          <InformationPanel>
+            {/* Tab */}
+            <TabSkeleton />
+
+            {/* Text */}
+            <TextContainer>
+              <TextSkeleton />
+              <TextSkeleton />
+              <TextSkeleton />
+              <TextSkeleton />
+              <TextSkeleton />
+              <TextSkeleton />
+            </TextContainer>
+          </InformationPanel>
+        )}
+      </ViewerContainer>
+    </>
+  );
+};
+
+export default ViewerSkeleton;

src/components/Viewer/index.tsx

@@ -22,6 +22,7 @@ import {
   getActiveManifest,
 } from "src/lib/iiif";
 import { ContentSearchQuery } from "src/types/annotations";
+import ViewerSkeleton from "./Viewer/ViewerSkeleton";
 
 export interface CloverViewerProps {
   canvasIdCallback?: (arg0: string) => void;
@@ -197,7 +198,7 @@ const RenderViewer: React.FC<CloverViewerProps> = ({
       const CustomLoadingComponent = options.customLoadingComponent;
       return <CustomLoadingComponent />;
     } else {
-      return <>Loading</>;
+      return <ViewerSkeleton options={options} />;
     }
   }