Dynamic import swal modules

Author: Rikthepixel

src/components/pages/about/Project.tsx

@@ -1,6 +1,6 @@
 import { IProject } from "@/assets/state/projects";
 import LinkButton from "@/components/controls/LinkButton";
-import { modal } from "@/utils/swal";
+
 import { useCallback } from "react";
 
 export interface ProjectProps extends IProject {
@@ -9,7 +9,9 @@ export interface ProjectProps extends IProject {
 
 const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText, linkRel }: ProjectProps) => {
 
-  const onImageClick = useCallback(() => {
+  const onImageClick = useCallback(async () => {
+    const { modal } = await import("@/utils/swal");
+
     modal.fire({
       title: thumbnailAlt,
       html: <>

src/utils/ssr.ts

@@ -1,6 +1,2 @@
 export const isSSR = typeof window === "undefined";
-export const isBrowser = !isSSR;
-
-export const asImport = <Props>(component: React.ComponentType<Props>) => {
-  return () => Promise.resolve({ "default": component });
-};
+export const isBrowser = !isSSR;

src/utils/wretch.tsx

@@ -1,17 +1,23 @@
 import wretch from "wretch";
-import { toast } from "./swal";
 
 export const backend = wretch(process.env.NEXT_PUBLIC_BACKEND_URL!)
   .options({
     mode: "cors"
   })
-  .catcher(404, () => toast.fire({
-    title: "Error",
-    icon: "error",
-    text: "Resource was not found."
-  }))
-  .catcher(500, () => toast.fire({
-    title: "Error",
-    icon: "error",
-    text: "Internal Server Error, try again later."
-  }));
+  .catcher(404, async () => {
+    const { toast } = await import("./swal");
+    toast.fire({
+      title: "Error",
+      icon: "error",
+      text: "Resource was not found."
+    });
+  })
+  .catcher(500, async () => {
+    const { toast } = await import("./swal");
+    
+    toast.fire({
+      title: "Error",
+      icon: "error",
+      text: "Internal Server Error, try again later."
+    });
+  });