Pass object instead of array in context provider

src/App.jsx

@@ -16,8 +16,8 @@ import Project from './components/project';
 import Blog from './components/blog';
 
 function App() {
-  const [theme] = useContext(ThemeContext);
-  const [, setLoading] = useContext(LoadingContext);
+  const { theme } = useContext(ThemeContext);
+  const { setLoading } = useContext(LoadingContext);
   const [profile, setProfile] = useState(null);
   const [repo, setRepo] = useState(null);
   const [error, setError] = useState(null);

src/components/avatar-card/index.jsx

@@ -5,7 +5,7 @@ import { skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
 const AvatarCard = (props) => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   return (
     <div className="card shadow-lg compact bg-base-100">

src/components/blog/index.jsx

@@ -23,7 +23,7 @@ const displaySection = () => {
 
 const Blog = () => {
   const [articles, setArticles] = useState(null);
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   useEffect(() => {
     if (displaySection()) {

src/components/details/index.jsx

@@ -12,7 +12,7 @@ import {
   FaGlobe,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
-import { Fragment, useContext } from 'react';
+import { useContext } from 'react';
 import { LoadingContext } from '../../contexts/LoadingContext';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
@@ -32,7 +32,7 @@ const ListItem = ({ icon, title, value, link }) => {
 };
 
 const Details = (props) => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];

src/components/education/index.jsx

@@ -5,7 +5,7 @@ import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 
 const Education = () => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];

src/components/experience/index.jsx

@@ -5,7 +5,7 @@ import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 
 const Experience = () => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];

src/components/head-tag-editor/index.jsx

@@ -6,7 +6,7 @@ import config from '../../ezprofile.config';
 import { isThemeDarkish } from '../../helpers/utils';
 
 const HeadTagEditor = (props) => {
-  const [theme] = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
 
   return (
     <Fragment>

src/components/project/index.jsx

@@ -6,7 +6,7 @@ import config from '../../ezprofile.config';
 import { ga, languageColor, skeleton } from '../../helpers/utils';
 
 const Project = (props) => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];

src/components/skill/index.jsx

@@ -4,7 +4,7 @@ import config from '../../ezprofile.config';
 import { skeleton } from '../../helpers/utils';
 
 const Skill = () => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];

src/components/theme-changer/index.jsx

@@ -6,8 +6,10 @@ import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 
 const ThemeChanger = () => {
-  const [theme, setTheme] = useContext(ThemeContext);
-  const [loading] = useContext(LoadingContext);
+  const { theme, setTheme } = useContext(ThemeContext);
+  const { loading } = useContext(LoadingContext);
+
+  console.log(theme);
 
   const changeTheme = (e, selectedTheme) => {
     e.preventDefault();