feat: changed backend-pg to backend

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -27,11 +27,18 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
   return (
     <div
       className={twMerge(
-        "container mx-auto flex relative flex-col h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8",
+        "container relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 px-8 text-mineshaft-50 dark:[color-scheme:dark]",
         className
       )}
     >
-      <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
+      <img
+        src="/images/loading/loading.gif"
+        height={70}
+        width={120}
+        alt="loading animation"
+        decoding="async"
+        loading="lazy"
+      />
       {text && isTextArray && (
         <AnimatePresence exitBeforeEnter>
           <motion.div
@@ -45,7 +52,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
           </motion.div>
         </AnimatePresence>
       )}
-      {text && !isTextArray && <div className="text-primary text-xs">{text}</div>}
+      {text && !isTextArray && <div className="text-xs text-primary">{text}</div>}
     </div>
   );
 };

frontend/src/context/OrgPermissionContext/OrgPermissionContext.tsx

@@ -27,6 +27,8 @@ export const OrgPermissionProvider = ({ children }: Props): JSX.Element => {
           src="/images/loading/loading.gif"
           height={70}
           width={120}
+          decoding="async"
+          loading="lazy"
           alt="infisical loading indicator"
         />
       </div>

frontend/src/context/ProjectPermissionContext/ProjectPermissionContext.tsx

@@ -23,6 +23,8 @@ export const ProjectPermissionProvider = ({ children }: Props): JSX.Element => {
           src="/images/loading/loading.gif"
           height={70}
           width={120}
+          decoding="async"
+          loading="lazy"
           alt="infisical loading indicator"
         />
       </div>

frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx

@@ -236,11 +236,13 @@ export const SecretDropzone = ({
               src="/images/loading/loading.gif"
               height={70}
               width={120}
+              decoding="async"
+              loading="lazy"
               alt="loading animation"
             />
           </div>
         ) : (
-          <div className="justify-cente flex flex-col items-center space-y-2">
+          <div className="flex flex-col items-center justify-center space-y-2">
             <div>
               <FontAwesomeIcon icon={faUpload} size={isSmaller ? "2x" : "5x"} />
             </div>

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -237,7 +237,14 @@ export const SecretOverviewPage = () => {
   if (isWorkspaceLoading) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
-        <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
+        <img
+          src="/images/loading/loading.gif"
+          height={70}
+          width={120}
+          alt="loading animation"
+          decoding="async"
+          loading="lazy"
+        />
       </div>
     );
   }