fix: minor refactoring

src/App.jsx

@@ -1,11 +1,4 @@
-import "./index.css";
-
 import { Darkmode, ErrorBoundary } from "./reusableComponents";
-import {
-  DeleteAccount,
-  SettingsSidebar,
-  SoundSetting,
-} from "./components/SettingsComponents";
 import { Outlet, Route, Routes, useNavigate } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 
@@ -36,6 +29,15 @@ const HelpCenter = React.lazy(() => import("./pages/FooterPages/HelpCenter"));
 const Notifications = React.lazy(() => import("./components/Notification"));
 const SideBar = React.lazy(() => import("./components/SideBar"));
 const Navbar = React.lazy(() => import("./components/Navbar"));
+const DeleteAccount = React.lazy(() =>
+  import("./components/SettingsComponents/DeleteAccount"),
+);
+const SettingsSidebar = React.lazy(() =>
+  import("./components/SettingsComponents/Sidebar"),
+);
+const SoundSetting = React.lazy(() =>
+  import("./components/SettingsComponents/Sounds"),
+);
 
 export function getModalStyle() {
   const top = 0;
@@ -68,7 +70,7 @@ export const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function App() {
+export default function App() {
   const [user, setUser] = useState(null);
   const [rowMode, setRowMode] = useState(false);
 
@@ -299,8 +301,6 @@ function App() {
   );
 }
 
-export default App;
-
 function Wrapper({ user, setUser, setRowMode }) {
   const [showScroll, setShowScroll] = useState(false);
   const scrollTop = () => {

src/components/SideBar/index.jsx

@@ -15,14 +15,14 @@ import { getModalStyle, useStyles } from "../../App";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { AiOutlineClose } from "react-icons/ai";
-import ImgUpload from "../ImgUpload";
 import { auth } from "../../lib/firebase";
 import blankImg from "../../assets/blank-profile.webp";
 import getUserSessionData from "../../js/userData";
 import { playSuccessSound } from "../../js/sounds";
 import { useSnackbar } from "notistack";
 
 const Footer = React.lazy(() => import("./Footer"));
+const ImgUpload = React.lazy(() => import("../ImgUpload"));
 
 function SideBar() {
   const classes = useStyles();

src/pages/Profile/index.jsx

@@ -1,7 +1,6 @@
 import "./index.css";
 
 import { Avatar, Box, Button, Typography } from "@mui/material";
-import { EditProfile, StoryView } from "../../components";
 import { ErrorBoundary, Loader, ViewsCounter } from "../../reusableComponents";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { auth, db, storage } from "../../lib/firebase";
@@ -33,6 +32,8 @@ import { setUserSessionData } from "../../js/userData";
 import { useSnackbar } from "notistack";
 
 const SideBar = lazy(() => import("../../components/SideBar"));
+const EditProfile = lazy(() => import("../../components/EditProfile"));
+const StoryView = lazy(() => import("../../components/Story"));
 
 function Profile() {
   const navigate = useNavigate();