Repository: reflex-dev/reflex
Pull request: UI connection warning:
This Pr adds a UI warning when server is unreachable
<img width="1512" alt="Screenshot 2023-05-31 at 3 34 45 PM" src="https://github.com/pynecone-io/pynecone/assets/19895635/6bf310bd-351d-4ceb-b08b-2473bfe457a2">

You also have the option of modifying the component that gets displayed.

```python

# Add state and page to the app.
app = pc.App(state=State, connect_error_component=pc.connection_banner(
    pc.box(
        pc.text(
            "cannot connect to server. This is edited",
            bg="black",
            color="white",
        ),
        textAlign="center",
    )
))
app.add_page(index)
app.compile()
```

To turn this feature/warning off, you can set the `check_connection` flag to False:

```python

# Add state and page to the app.
app = pc.App(state=State, check_connection=False)
app.add_page(index)
app.compile()
```
### All Submissions:

- [ ] Have you followed the guidelines stated in [CONTRIBUTING.md](https://github.com/pynecone-io/pynecone/blob/main/CONTRIBUTING.md) file?
- [ ] Have you checked to ensure there aren't any other open [Pull Requests](https://github.com/pynecone-io/pynecone/pulls ) for the desired changed?


<!-- You can erase any parts of this template not applicable to your Pull Request. -->

### Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update


### New Feature Submission:

- [ ] Does your submission pass the tests? 
- [ ] Have you linted your code locally prior to submission?

### Changes To Core Features:

- [ ] Have you added an explanation of what your changes do and why you'd like us to include them?
- [ ] Have you written new tests for your core changes, as applicable?
- [ ] Have you successfully ran tests with your changes locally?

closes #971 



Problem statement:
Show warning if can't connect to api_url
When deploying an app if you don't update the `api_url` in your `pcconfig.py` currently the app doesn't work and you have to go in the Network tab to see the error. We should have a way to throw a UI warning when the backend isn't connected.

Hints from issue discussion:
Hi @picklelo @Alek99, I would like to take up this issue. I have gone through the deploy function in the pc.py file. I got some understanding. Please brief this issue so that I can take this and I work on this.

Commit message: added ommited libraries to default

Patch to review:
diff --git a/pynecone/.templates/jinja/web/pages/index.js.jinja2 b/pynecone/.templates/jinja/web/pages/index.js.jinja2
index 17686aebe5a..e1293616c96 100644
--- a/pynecone/.templates/jinja/web/pages/index.js.jinja2
+++ b/pynecone/.templates/jinja/web/pages/index.js.jinja2
@@ -11,6 +11,7 @@
 export default function Component() {
   const [{{state_name}}, {{state_name|react_setter}}] = useState({{initial_state|json_dumps}})
   const [{{const.result}}, {{const.result|react_setter}}] = useState({{const.initial_result|json_dumps}})
+  const [notConnected, setNotConnected] = useState(false)
   const {{const.router}} = useRouter()
   const {{const.socket}} = useRef(null)
   const { isReady } = {{const.router}}
@@ -35,7 +36,7 @@ export default function Component() {
       return;
     }
     if (!{{const.socket}}.current) {
-      connect({{const.socket}}, {{state_name}}, {{state_name|react_setter}}, {{const.result}}, {{const.result|react_setter}}, {{const.router}}, {{transports}})
+      connect({{const.socket}}, {{state_name}}, {{state_name|react_setter}}, {{const.result}}, {{const.result|react_setter}}, {{const.router}}, {{transports}}, setNotConnected)
     }
     const update = async () => {
       if ({{const.result}}.{{const.state}} != null){
@@ -70,7 +71,21 @@ export default function Component() {
   {% endfor %}
 
   return (
+  <Fragment>
+      <Fragment>
+        {notConnected ? (
+          <Box sx={% raw %}{{"textAlign": "center"}}{% endraw %}>
+            <Text sx={% raw %}{{ "bg": "red", "color": "white"}}{% endraw %}>
+              {`cannot connect to server. check if server is reachable.`}
+              </Text>
+          </Box>
+        ) : (
+          <Fragment>
+          </Fragment>
+        )}
+      </Fragment>
     {{utils.render(render, indent_width=0)}}
+    </Fragment>
   )
 }
 {% endblock %}
diff --git a/pynecone/.templates/web/utils/state.js b/pynecone/.templates/web/utils/state.js
index 9c8e0a4a0bb..770053b0c24 100644
--- a/pynecone/.templates/web/utils/state.js
+++ b/pynecone/.templates/web/utils/state.js
@@ -193,9 +193,11 @@ export const connect = async (
   result,
   setResult,
   router,
-  transports
+  transports,
+  setNotConnected
 ) => {
   // Get backend URL object from the endpoint
+  console.log("event url", EVENTURL);
   const endpoint_url = new URL(EVENTURL);
   // Create the socket.
   socket.current = io(EVENTURL, {
@@ -207,6 +209,11 @@ export const connect = async (
   // Once the socket is open, hydrate the page.
   socket.current.on("connect", () => {
     updateState(state, setState, result, setResult, router, socket.current);
+    setNotConnected(false)
+  });
+
+  socket.current.on('connect_error', (error) => {
+    setNotConnected(true)
   });
 
   // On each received message, apply the delta and set the result.
diff --git a/pynecone/compiler/compiler.py b/pynecone/compiler/compiler.py
index a00974f2ce0..df7e1fb6ba5 100644
--- a/pynecone/compiler/compiler.py
+++ b/pynecone/compiler/compiler.py
@@ -15,6 +15,7 @@
 # Imports to be included in every Pynecone app.
 DEFAULT_IMPORTS: imports.ImportDict = {
     "react": {
+        ImportVar(tag="Fragment"),
         ImportVar(tag="useEffect"),
         ImportVar(tag="useRef"),
         ImportVar(tag="useState"),
@@ -31,7 +32,11 @@
         ImportVar(tag="getRefValue"),
     },
     "": {ImportVar(tag="focus-visible/dist/focus-visible")},
-    "@chakra-ui/react": {ImportVar(tag=constants.USE_COLOR_MODE)},
+    "@chakra-ui/react": {
+        ImportVar(tag=constants.USE_COLOR_MODE),
+        ImportVar(tag="Box"),
+        ImportVar(tag="Text"),
+    },
 }
 
 


Code review comments:
diff_hunk: @@ -70,7 +71,21 @@ export default function Component() {
   {% endfor %}
 
   return (
+  <Fragment>
+      <Fragment>
+        {notConnected ? (
+          <Box sx={% raw %}{{"textAlign": "center"}}{% endraw %}>
path: pynecone/.templates/jinja/web/pages/index.js.jinja2
text: @user1:
I think we can define this as a Pynecone component - and allow the user to override it as an argument to `pc.App`