Modularization of Modal Component:

- The Modal class has been replaced with more specialized components using Pydantic models for better state management (AlertDialogRef, ConfirmDialogRef)
- Functions like use_alert_dialog, use_confirm_dialog, alert_dialog, and confirm_dialog manage modal states and rendering.

Component Enhancements:
- Added button_with_confirm_dialog to handle button interactions related to confirm dialogs.
- The modal_scaffold function creates a standardized structure for modals, supporting large modals with appropriate bootstrap CSS classes.
- Add Modal Animations

Renderer Context Management:
- Introduced current_root_ctx for handling the context of the current rendering tree.
Utilizes thread-local storage for managing the root context, ensuring consistent state across renders.

Error Handling:
- Handle undefined loaderHeaders
- Ignore network errors in sentry
- Reduce UI layout change on lazy load

Version Bump:
- Updated the version from 0.1.1 to 0.2.0, indicating significant changes.

Author: devxpy

app/base.tsx

@@ -22,12 +22,15 @@ import { lazyImport } from "./lazyImports";
 const { DataTable, DataTableRaw } = lazyImport(() => import("~/dataTable"));
 
 const { GooeyFileInput } = lazyImport(() => import("~/gooeyFileInput"), {
-  fallback: (
-    <div
-      className="gui-input d-flex align-items-center justify-content-center"
-      style={{ height: "250px" }}
-    >
-      Loading...
+  fallback: ({ label }) => (
+    <div className="gui-input">
+      {label && <RenderedMarkdown body={label} />}
+      <div
+        className="d-flex align-items-center justify-content-center bg-light"
+        style={{ height: "250px" }}
+      >
+        Loading...
+      </div>
     </div>
   ),
 });

app/components/GooeySelect.tsx

@@ -61,7 +61,7 @@ export default function GooeySelect({
       <ClientOnlySuspense
         fallback={
           <div
-            className="d-flex align-items-center justify-content-center"
+            className="d-flex align-items-center justify-content-center border rounded"
             style={{ height: "38px" }}
           >
             Loading...

app/entry.client.tsx

@@ -1,33 +1,38 @@
-import { useLocation, useMatches, RemixBrowser } from "@remix-run/react";
-import { hydrate } from "react-dom";
+import { RemixBrowser, useLocation, useMatches } from "@remix-run/react";
 import * as Sentry from "@sentry/remix";
 import { useEffect } from "react";
-import { HttpClient, Offline } from "@sentry/integrations";
+import { hydrate } from "react-dom";
 
 Sentry.init({
   dsn: window.ENV.SENTRY_DSN,
+  release: window.ENV.SENTRY_RELEASE,
+  environment: "client",
   integrations: [
-    new Sentry.BrowserTracing({
-      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-      // tracePropagationTargets: ["localhost", /^https:\/\/gooey\.ai\/.*/],
-      routingInstrumentation: Sentry.remixRouterInstrumentation(
-        useEffect,
-        useLocation,
-        useMatches
-      ),
+    Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches,
     }),
-    new Sentry.Replay(),
-    new HttpClient(),
+    Sentry.replayIntegration(),
+    Sentry.httpClientIntegration(),
   ],
-  release: window.ENV.SENTRY_RELEASE,
   // Performance Monitoring
   tracesSampleRate: 0.005, // Capture X% of the transactions, reduce in production!
   // Session Replay
   replaysSessionSampleRate: 0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
   replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
   // This option is required for capturing headers and cookies.
   sendDefaultPii: true,
+  // To enable offline events caching, use makeBrowserOfflineTransport to wrap existing transports and queue events using the browsers' IndexedDB storage.
+  // Once your application comes back online, all events will be sent together.
   transport: Sentry.makeBrowserOfflineTransport(Sentry.makeFetchTransport),
+  // You can use the ignoreErrors option to filter out errors that match a certain pattern.
+  ignoreErrors: [
+    /TypeError: Failed to fetch/i,
+    /TypeError: Load failed/i,
+    /(network)(\s+)(error)/i,
+    /AbortError/i,
+  ],
 });
 
 hydrate(<RemixBrowser />, document);

app/entry.server.tsx

@@ -8,6 +8,7 @@ import settings from "./settings";
 if (settings.SENTRY_DSN) {
   Sentry.init({
     dsn: settings.SENTRY_DSN,
+    environment: "server",
     // Integrations:
     //    e.g. new Sentry.Integrations.Prisma({ client: prisma })
     // Performance Monitoring:
@@ -42,8 +43,10 @@ export default function handleDocumentRequestFunction(
         <RemixServer context={remixContext} url={request.url} />
       );
 
-      for (let [key, value] of loaderHeaders.entries()) {
-        responseHeaders.set(key, value);
+      if (loaderHeaders) {
+        for (let [key, value] of loaderHeaders.entries()) {
+          responseHeaders.set(key, value);
+        }
       }
       responseHeaders.delete("Content-Length");
       responseHeaders.set("Content-Type", "text/html");

app/global-progres-bar.tsx

@@ -15,6 +15,7 @@ export const useGlobalProgress = () => {
   const fetchers = useFetchers();
 
   useEffect(() => {
+    if (!document.querySelector(parent)) return;
     NProgress.configure({ parent, trickleSpeed: 100 });
   }, []);
 

app/lazyImports.tsx

@@ -4,7 +4,9 @@ import LoadingFallback from "./loadingfallback";
 
 export function lazyImport<T>(
   loader: () => Promise<T>,
-  { fallback }: { fallback?: React.ReactNode } = {}
+  {
+    fallback,
+  }: { fallback?: (props: Record<string, any>) => React.ReactNode } = {}
 ): T {
   return new Proxy(
     {},
@@ -22,7 +24,7 @@ export function lazyImport<T>(
 
         return (props: any) => {
           return (
-            <ClientOnlySuspense fallback={fallback}>
+            <ClientOnlySuspense fallback={fallback && fallback(props)}>
               {() => <Component {...props} />}
             </ClientOnlySuspense>
           );

app/renderedHTML.tsx

@@ -22,7 +22,10 @@ export function RenderedHTML({
     return <RenderLocalDt body={body} {...attrs} />;
   }
 
-  const parsedElements = parse(body, reactParserOptions);
+  if (typeof body !== "string") {
+    body = JSON.stringify(body);
+  }
+  const parsedElements = parse(body || "", reactParserOptions);
   return (
     <LineClamp lines={lineClamp} key={body}>
       <span className="gui-html-container" {...attrs}>

app/root.tsx

@@ -77,7 +77,8 @@ export default function App() {
 const reloadOnErrors = [
   "TypeError: Failed to fetch",
   "TypeError: Load failed",
-  "A network error",
+  "Network Error",
+  "NetworkError",
 ];
 
 const ignoreErrors = ["AbortError"];

app/styles/custom.css

@@ -753,4 +753,30 @@ a.text-primary:hover {
 }
 .cm-lineNumbers .cm-gutterElement {
   min-width: 36px !important;
-}
+}
+
+/* Modal animations */
+@keyframes popOut {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.modal-dialog {
+  animation: popOut 0.2s forwards;
+}
+@keyframes fadeInBackground {
+  0% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+.modal {
+  animation: fadeInBackground 1s forwards;
+}

py/gooey_gui/components/__init__.py

@@ -1,4 +1,13 @@
 from .common import *
-from .modal import Modal
+from .modal import (
+    AlertDialogRef,
+    ConfirmDialogRef,
+    use_alert_dialog,
+    modal_scaffold,
+    alert_dialog,
+    use_confirm_dialog,
+    confirm_dialog,
+    button_with_confirm_dialog,
+)
 from .pills import pill
 from .url_button import url_button