Merge pull request #7672 from Bharath314/remove-react-loadable

[Dependencies] Remove react loadable

Author: Rajesh-Nagarajan-11

package-lock.json

@@ -92,7 +92,6 @@
     "react-debounce-input": "^3.3.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^10.0.3",
-    "react-loadable": "^5.5.0",
     "react-modal": "^3.16.3",
     "react-player": "^2.12.0",
     "react-select": "^5.10.0",

package.json

@@ -1,64 +1,67 @@
 import React from "react";
 import SEO from "../../components/seo";
 
-
-import Loadable from "react-loadable";
+import loadable from "@loadable/component";
 import Loader from "./Loader.style";
 import LoadingIcon from "../../assets/images/LoadingIcon";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import { Container } from "../../reusecore/Layout";
 import CalendarStyleWrapper from "../../sections/Community/Calendar/calendar.style";
 import PageHeader from "../../reusecore/PageHeader";
-const LoadableCalendar = Loadable({
-  loader: () => import("../../sections/Community/Calendar"),
-  loading() {
-    return (
-      <Loader>
-        <div className="loading-modal">
-          <LoadingIcon />
-        </div>
-        <div className="calender">
-          <CalendarStyleWrapper>
-            <PageHeader
-              title="Community Calendar"
-              path="Community > Calendar"
-              subtitle="Join any or all of the weekly meetings"
-            />
-            <Container>
-              <div className="calendar-wrapper">
-                <div className="calendar-grid">
-                  <FullCalendar
-                    plugins={[dayGridPlugin]}
-                    initialView="dayGridMonth"
-                    contentHeight={700}
-                    headerToolbar={{
-                      left: "prev,next today",
-                      center: "title",
-                      right: "addToCalendar",
-                    }}
-                  />
-                </div>
-              </div>
-            </Container>
-          </CalendarStyleWrapper>
-        </div>
-      </Loader>
-    );
+
+const calendarFallback = (
+  <Loader>
+    <div className="loading-modal">
+      <LoadingIcon />
+    </div>
+    <div className="calender">
+      <CalendarStyleWrapper>
+        <PageHeader
+          title="Community Calendar"
+          path="Community > Calendar"
+          subtitle="Join any or all of the weekly meetings"
+        />
+        <Container>
+          <div className="calendar-wrapper">
+            <div className="calendar-grid">
+              <FullCalendar
+                plugins={[dayGridPlugin]}
+                initialView="dayGridMonth"
+                contentHeight={700}
+                headerToolbar={{
+                  left: "prev,next today",
+                  center: "title",
+                  right: "addToCalendar",
+                }}
+              />
+            </div>
+          </div>
+        </Container>
+      </CalendarStyleWrapper>
+    </div>
+  </Loader>
+);
+
+const LoadableCalendar = loadable(
+  () => import("../../sections/Community/Calendar"),
+  {
+    fallback: calendarFallback,
   },
-});
+);
 const CalendarPage = () => {
   return (
     <>
       <LoadableCalendar />
-
     </>
   );
 };
 export default CalendarPage;
 export const Head = () => {
-  return <SEO
-    title="Layer5 Events Calendar"
-    description="Join any or all of the Layer5 community meetings."
-  />;
-};
+  return (
+    <SEO
+      title="Layer5 Events Calendar"
+      description="Join any or all of the Layer5 community meetings."
+    />
+  );
+};