Merge pull request #2 from crocodile-inc/main

Feat synthetic delay

src/components/Footer/index.tsx

@@ -1,13 +1,20 @@
-import { Chip, Container, Divider, Paper, Stack, Typography } from '@mui/material';
+import { Chip, Container, Divider, Paper, Stack, Typography, useTheme } from '@mui/material';
 import { useLocale } from '~/shared/hooks/useLocale';
 import { t } from 'ttag';
 
 export const Footer = () => {
+  const theme = useTheme();
+
   const { setLocale, locales, getLocale } = useLocale();
   const currentLocale = getLocale();
 
   return (
-    <Paper component="footer" sx={{ p: 2 }} variant="outlined" square>
+    <Paper
+      component="footer"
+      sx={{ p: 2, border: 0, borderTop: `1px solid ${theme.palette.divider}` }}
+      variant="outlined"
+      square
+    >
       <Container
         maxWidth="lg"
         sx={{

src/features/gallery/components/UnraveledPicture/index.tsx

@@ -1,23 +1,35 @@
 import { UnraveledPicture as IUnraveledPicture } from '~/features/gallery/models';
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { reverse } from 'named-urls';
 import { routes } from '~/routes';
 import { Box, Skeleton, Typography, useTheme } from '@mui/material';
 import { config } from '~/config';
 import styles from './UnraveledPicture.module.css';
 import classNames from 'classnames';
+import { syntheticDelay } from '~/features/gallery/constants';
 
 interface UnraveledPictureProps {
   picture: IUnraveledPicture;
 }
 
 export const UnraveledPicture: FC<UnraveledPictureProps> = ({ picture }) => {
   const theme = useTheme();
+
+  const [timeBeforeShow, setTimeBeforeShow] = useState(syntheticDelay);
   const [isImgLoaded, setIsImgLoaded] = useState(false);
   const { id, answer } = picture;
 
-  if (!isImgLoaded) {
+  useEffect(() => {
+    if (timeBeforeShow > 0) {
+      const timeoutId = setTimeout(() => setTimeBeforeShow(time => time - 1), 500);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [timeBeforeShow]);
+
+  if (!isImgLoaded || !(timeBeforeShow <= 0)) {
     return (
       <Skeleton
         variant="rectangular"

src/features/gallery/constants.ts

@@ -0,0 +1 @@
+export const syntheticDelay = 1.5;