feat(): Adding the loading screen

Author: ar1603

.eslintrc.json

@@ -33,7 +33,7 @@
     "no-irregular-whitespace": "off",
     "react/no-children-prop": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-var-requires": "off"

src/components/CoverText/Sparkle.tsx

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import { useId } from 'react';
 import { useEffect, useState } from 'react';
 import Particles, { initParticlesEngine } from '@tsparticles/react';
 import type { Container, SingleOrMultiple } from '@tsparticles/engine';
@@ -19,7 +19,6 @@ type ParticlesProps = {
 export const SparklesCore = (props: ParticlesProps) => {
   const {
     id,
-    className,
     background,
     minSize,
     maxSize,

src/components/Cursor/CursorProvider.tsx

@@ -1,6 +1,5 @@
 import { createContext, useContext, useState } from 'react';
 import FollowCursor from './FollowCursor';
-import SplashCursor from './SplashCursor';
 
 export type CursorType = 'follow' | 'splash';
 

src/components/Marquee/__tests__/Marquee.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import Marquee from '../Marquee';
 
 describe('Marquee', () => {

src/hooks/useMoveToTop.tsx

@@ -1,7 +1,10 @@
 const useMoveToTop = () => {
   const moveToTopOfPage = () => {
     // Make it scroll to the top of the page slowly.
-    window.scrollTo(0, 0);
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
   };
 
   return moveToTopOfPage;

src/hooks/useSpringMousePosition.tsx

@@ -1,4 +1,4 @@
-import { useMotionValue, useSpring, spring, frame } from 'framer-motion';
+import { useMotionValue, useSpring, frame } from 'framer-motion';
 import { RefObject, useEffect } from 'react';
 import { SPRING_SETTING } from './constants';
 

src/providers/lazyProvider/LazyComponentProvider.tsx

@@ -1,8 +1,34 @@
 import * as React from 'react';
 import { LazyComponentProviderProps } from './types';
+import { Box, CircularProgress, Text } from '@chakra-ui/react';
+
+const LoadingScreen = () => {
+  return (
+    <Box
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        backgroundColor: '#000000',
+        rowGap: '1rem',
+      }}
+    >
+      <CircularProgress isIndeterminate color="violet" />
+      <Text color="white" fontSize="lg" fontWeight="bold" textAlign="center">
+        Loading...
+      </Text>
+    </Box>
+  );
+};
 
 const LazyComponentProvider = (props: LazyComponentProviderProps) => {
-  return <React.Suspense fallback={<></>}>{props.children}</React.Suspense>;
+  return (
+    <React.Suspense fallback={<LoadingScreen />}>
+      {props.children}
+    </React.Suspense>
+  );
 };
 
 export default LazyComponentProvider;

src/screens/common/NavigationBar.tsx

@@ -1,10 +1,11 @@
-import { Box, HStack, Img, Kbd } from '@chakra-ui/react';
+import { Box, HStack, Img } from '@chakra-ui/react';
 import { LinkButton, useCursor } from '@components';
 import AmitRaikwarLogo from '@assets/images/AmitRaikwarLogo.png';
 import { SearchIcon } from '@assets';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useMoveToTop } from '@hooks';
 
 const NavigationLink = [
   {
@@ -31,6 +32,7 @@ const ArticleLink = {
 };
 
 const NavigationBar = () => {
+  const moveToTop = useMoveToTop();
   const location = useLocation();
   const pathName = location.pathname;
   const navigate = useNavigate();
@@ -77,7 +79,10 @@ const NavigationBar = () => {
         src={AmitRaikwarLogo}
         alt={'logo'}
         w={8}
-        onClick={() => navigate('/')}
+        onClick={() => {
+          navigate('/');
+          moveToTop();
+        }}
         _hover={{
           transform: 'scale(1.3)',
           transition: 'transform 0.5s',

src/screens/mainFlow/contents/AboutMe.tsx

@@ -1,4 +1,4 @@
-import { Heading, HStack, VStack } from '@chakra-ui/react';
+import { Heading, VStack } from '@chakra-ui/react';
 import { useCursor } from '@components';
 import { useIsIntersecting } from '@hooks';
 import { useEffect, useRef } from 'react';
@@ -24,9 +24,13 @@ const AboutMe = () => {
       id="about"
       width={'99vw'}
       paddingX={32}
-      paddingY={24}
     >
-      <Heading width={'100%'} textAlign={'start'}>
+      <Heading
+        width={'100%'}
+        textAlign={'start'}
+        position={'sticky'}
+        top={'10vh'}
+      >
         {t('about.title')}
       </Heading>
       <TextGenerateEffect words={t('about.aboutMe')} />

src/screens/mainFlow/contents/Contact.tsx

@@ -4,8 +4,10 @@ import { useTranslation } from 'react-i18next';
 const Contact = () => {
   const { t } = useTranslation();
   return (
-    <Box minH={'100vh'} id="contact" paddingTop={24} rowGap={10}>
-      <Heading textAlign={'start'}>{t('contact.title')}</Heading>
+    <Box minH={'100vh'} width={'99vw'} id="contact" paddingX={32}>
+      <Heading textAlign={'start'} position={'sticky'} top={'10vh'}>
+        {t('contact.title')}
+      </Heading>
       <HStack></HStack>
     </Box>
   );