webhook details loader was added

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -8,6 +8,7 @@ import { Text } from "@docspace/components";
 import { DetailsBar } from "./sub-components/DetailsBar";
 import DetailsNavigationHeader from "./sub-components/DetailsNavigationHeader";
 import { MessagesDetails } from "./sub-components/MessagesDetails";
+import { WebhookDetailsLoader } from "../sub-components/Loaders";
 
 const DetailsWrapper = styled.div`
   width: 100%;
@@ -19,17 +20,26 @@ const EventDetailsHeader = styled.header`
 
 const WebhookEventDetails = () => {
   const { id } = useParams();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => setIsLoading(false), 2000);
+  }, []);
 
   return (
     <DetailsWrapper>
       <DetailsNavigationHeader />
-      <main>
-        <EventDetailsHeader>
-          <Text fontWeight={600}>Webhook {id}</Text>
-          <DetailsBar />
-        </EventDetailsHeader>
-        <MessagesDetails />
-      </main>
+      {isLoading ? (
+        <WebhookDetailsLoader />
+      ) : (
+        <main>
+          <EventDetailsHeader>
+            <Text fontWeight={600}>Webhook {id}</Text>
+            <DetailsBar />
+          </EventDetailsHeader>
+          <MessagesDetails />
+        </main>
+      )}
     </DetailsWrapper>
   );
 };