Loading overlay

                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="column" gap="small">
                                                            <w-button :label="`${loading ? 'Disable' : 'Enable'} loading` " @click="toggleLoading" />
                                                        
                                                            <w-card
                                                              padding="none"
                                                              style="overflow: hidden; position: relative;"
                                                            >
                                                              <w-loading-overlay :loading="loading">
                                                                <w-stack direction="column" full-width align-items="stretch">
                                                                  <w-spacer all="medium">
                                                                    <w-toggle label="Patients" hint="Allow access to patients records, but not medical information" reverse />
                                                                  </w-spacer>
                                                                  <w-divider variant="primary" />
                                                                  <w-spacer all="medium">
                                                                    <w-toggle
                                                                      label="Messages"
                                                                      hint="Allow you to read and reply to patients messages"
                                                                      reverse
                                                                    />
                                                                  </w-spacer>
                                                                  <w-divider variant="primary" />
                                                                  <w-spacer all="medium">
                                                                    <w-toggle label="Control panel" reverse />
                                                                  </w-spacer>
                                                                  <w-divider variant="primary" />
                                                                  <w-spacer all="medium">
                                                                    <w-toggle label="Appointments reports" reverse />
                                                                  </w-spacer>
                                                                  <w-divider variant="primary" />
                                                                  <w-spacer
                                                                    all="medium"
                                                                  >
                                                                    <w-toggle
                                                                      label="Income reports"
                                                                      reverse
                                                                    />
                                                                  </w-spacer>
                                                                  <w-divider variant="primary" />
                                                                  <w-spacer
                                                                    all="medium"
                                                                  >
                                                                    <w-toggle
                                                                      label="Campaigns"
                                                                      reverse
                                                                    />
                                                                  </w-spacer>
                                                                </w-stack>
                                                              </w-loading-overlay>
                                                            </w-card>
                                                          </w-stack>
                                                        </template>
                                                        <script>
                                                        export default {
                                                          data() {
                                                            return {
                                                              loading: true
                                                            };
                                                          },
                                                          methods: {
                                                            toggleLoading() {
                                                              this.loading = !this.loading;
                                                            }
                                                          }
                                                        };
                                                        </script>